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

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会在渲染视图之前将这些插值转换为相应的属性绑定. 资源

Answer 2

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

第一步：

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

<img [src]="imageSrc">

第二步：

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

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

现在，null由于未在元素上设置值，这将消除网络呼叫（空呼叫）。