新 Angular 中的 ngSrc 是什么？答案

【问题标题】：Whats equivalent to ngSrc in the newer Angular?新 Angular 中的 ngSrc 是什么？
【发布时间】：2023-03-13 22:50:02
【问题描述】：

我想实现 img，src 来自 JSON 对象。

在 AngularJS 中，我可以做到：

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

Angular 2+ 中是否有与此等价的功能？

【问题讨论】：

标签： angular

【解决方案1】：

AngularJS：

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

Angular 2+：

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

Angular docs

注意插值可以达到同样的效果：

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

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

这两个属性绑定语句之间没有技术差异，只要您不希望双向绑定。

插值是许多属性绑定的便捷替代方案案例。事实上，Angular 将这些插值转换为渲染视图之前的相应属性绑定。 source

【讨论】：

所以，它不等同于 ng-src，因为 ng-src 避免在 ng-src 有值之前加载图像
正如塞巴斯蒂安所说！它不相等，因为像video/audio 和其他少数元素这样的元素不应该有没有价值的attributes。 ng-src 不等同于 [src]
要达到与 ng-src 相同的结果，您需要添加一个 ngIf，如下所示：<img *ngIf="vehicle?.imageUrl" [src]="vehicle.imageUrl">

【解决方案2】：

在您的 Angular 应用程序中实现与 ng-src 相同的功能是一个两步过程。

第一步：

在您的 HTML 中，使用新语法：

<img [src]="imageSrc">

第二步：

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

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

现在，由于没有为元素设置值，这将消除 null 网络调用（空调用）。

【讨论】：

【解决方案3】：

也可以写成插值形式：

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

【讨论】：

为什么不呢？ 54321

【解决方案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>

【讨论】：

投反对票，因为这不是推荐的解决方案，因为它会创建一个失败的请求：img.youtube.com/vi{{post.youtubeVideoId}}/default.jpg。
创建一个失败的请求！同意。
我删除了答案中破坏 URL 的部分。