使 img src 可通过变量更改答案

【问题标题】：Make img src changeable by a variable使 img src 可通过变量更改
【发布时间】：2019-02-25 19:29:13
【问题描述】：

使用 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>

【问题讨论】：

标签： javascript angularjs svg href src

【解决方案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}}" />

【讨论】：