使 img src 可通过变量更改

Question

使用 img 标签添加 svg 图像：

<img src="/photo1.svg" width="15" height="15">

我希望根据值设置 src。在这种情况下，具有 ng 重复：

<div ng-repeat="item in parent.items"
<img src="/files/photo1.svg" width="15" height="15"> 
</div>

知道item还有另一个属性，item.photo该属性的值为链接：/files/photo1.svg，/files/photo2.svg或/files/photo3.svg。

我的问题是，是否有可能在 ng-repeat 内部根据 item.photo 更改 src 的值。

似乎给 src 一个变量不起作用：

<img src=item.photo width="15" height="15"> 

我也尝试使用三元，但没有奏效：

<div ng-repeat="item in parent.items"
<img src="item.photo === '/files/photo1.svg' ? '/files/photo1.svg' : 
item.photo === '/files/photo2.svg' ? '/files/photo2.svg' :
'/files/photo2.svg' " width="15" height="15"> 
</div>

Answer 1

你需要使用ng-src

<div ng-repeat="item in parent.items"
<img ng-src="{{item.photo === '/files/photo1.svg' ? '/files/photo1.svg' : 
item.photo === '/files/photo2.svg' ? '/files/photo2.svg' :
'/files/photo2.svg'}}" width="15" height="15"> 
</div>

如果要将item.photo的值直接分配给src那么您可以简单地执行以下操作：

<img ng-src="{{item.photo}}" />