我希望实现一个图片,其src来源于JSON对象。
在AngularJS中,我可以这样做:
<img ng-src="{{hash}}" alt="Description" />
在 Angular 2+ 中有类似的东西吗?
我希望实现一个图片,其src来源于JSON对象。
在AngularJS中,我可以这样做:
<img ng-src="{{hash}}" alt="Description" />
在 Angular 2+ 中有类似的东西吗?
AngularJS:
<img ng-src="{{movie.imageurl}}">
Angular 2+:
<img [src]="movie.imageurl">
请注意插值表达式可以实现相同的结果:
<img src="{{vehicle.imageUrl}}">
<img [src]="vehicle.imageUrl">
只要不需要双向绑定,这两种属性绑定语句在技术上没有区别。
在许多情况下,插值表达式是属性绑定的方便替代方式。实际上,在渲染视图之前,Angular会将这些插值表达式转换为相应的属性绑定。 来源
实现Angular应用中ng-src相同功能的方法需要两步。
第一步:
在你的HTML代码中,使用新的语法:
<img [src]="imageSrc">
第二步:
在你的组件/指令中,将值初始化为空值。例如:
@Component({
selector: 'ag-video',
templateUrl: './video.component.html'
})
export class SampleComponent {
imageSrc = '';
}
null
网络调用(空调用)。<img src="{{movie.imageurl}}">
<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>
video/audio
和其他一些元素不应该具有没有值的attributes
。ng-src
与[src]
不等效。 - Nikhilesh Shivarathring-src
相同的结果,您需要添加一个ngIf
,类似于以下内容:<img *ngIf="vehicle?.imageUrl" [src]="vehicle.imageUrl">
- Ahmed Osama