Question

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

在AngularJS中，我可以这样做：

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

Angular 2 +中是否有相应的内容？

Answer 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

Answer 2

在Angular应用程序中实现ng-src的相同功能需要两个步骤。

第一步：

在HTML中，使用新语法：

<img [src]="imageSrc">

第二步：

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

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

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

Answer 3

它也可以用插值形式编写，如：

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

Answer 4

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

   <td>
    <img src="https://img.youtube.com/vi/{{post.youtubeVideoId}}/default.jpg">
   </td>

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

</tr>

什么相当于较新的Angular中的ngSrc？

4 个答案: