通过变量使 img src 可变

Question

使用 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，其值为 link：/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>

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}}" />

通过变量使 img src 可变

Make img src changeable by a variable

javascript

svg

href

src

angularjs