新版Angular中与ngSrc相当的是什么？

Question

我希望实现一个图片，其src来源于JSON对象。

在AngularJS中，我可以这样做：

<img ng-src="{{hash}}" alt="Description" />

在 Angular 2+ 中有类似的东西吗？

- uksz

Answer 1

AngularJS：

<img ng-src="{{movie.imageurl}}">

Angular 2+：

<img [src]="movie.imageurl">

请注意插值表达式可以实现相同的结果：

---

Angular 文档

<img src="{{vehicle.imageUrl}}">

<img [src]="vehicle.imageUrl">

只要不需要双向绑定，这两种属性绑定语句在技术上没有区别。

在许多情况下，插值表达式是属性绑定的方便替代方式。实际上，在渲染视图之前，Angular会将这些插值表达式转换为相应的属性绑定。 来源

- Randy

---

所以，它不等同于ng-src，因为ng-src避免在ng-src没有值之前加载图像。 - Sebastián Rojas

正如Sebastian所说！它们并不相等，因为像video/audio和其他一些元素不应该具有没有值的attributes。ng-src与[src]不等效。 - Nikhilesh Shivarathri

要实现与ng-src相同的结果，您需要添加一个ngIf，类似于以下内容： <img *ngIf="vehicle?.imageUrl" [src]="vehicle.imageUrl"> - Ahmed Osama

在 Angular 15+ 中还有 ngSrc：https://angular.io/guide/image-directive - Bastien

Answer 2

实现Angular应用中ng-src相同功能的方法需要两步。

第一步：

在你的HTML代码中，使用新的语法：

<img [src]="imageSrc">

第二步：

在你的组件/指令中，将值初始化为空值。例如：

@Component({
  selector: 'ag-video',
  templateUrl: './video.component.html'
})
export class SampleComponent {
   imageSrc = '';
}

现在，由于该值未设置到元素上，这将消除null网络调用（空调用）。

- Nikhilesh Shivarathri

Answer 3

它也可以使用内插形式编写，例如：

<img src="{{movie.imageurl}}">

- Raksha Bhartiya

---

为什么不呢？54321 - Bartho Bernsmann

Answer 4

<tr *ngFor="let post of posts | paginate: { id: 'server', itemsPerPage: 
       10, currentPage: p , totalItems: count  }">

   <td>
    <img src="{{post.youtubeVideoId}}">
   </td>

   <td>
     {{post.videoName}}
   </td>

</tr>

- Shashwat Gupta

---

因为这不是推荐的解决方案，会导致请求失败：https://img.youtube.com/vi/{{post.youtubeVideoId}}/default.jpg。 - Jamie

创建一个失败的请求！同意。 - Nikhilesh Shivarathri

我删除了破坏URL的答案部分。 - Randy