使img src可以通过变量进行更改

Posted 2021-03-26

使用img标签添加svg图像：

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

我想要根据值设置src。在这种情况下，有一个ng-repeat：

<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中可以使src根据item.photo改变它的值。

似乎给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>

答案

你需要使用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}}" />