使 img src 可通过变量更改

Posted 2023-03-28

【中文标题】使 img src 可通过变量更改

【英文标题】：Make img src changeable by a variable

【发布时间】：2019-02-25 19:29:13

【问题描述】：

使用 img 标签添加 svg 图片：

<img src="/photo1.svg"  >

我希望 src 基于一个值来设置。在这种情况下，有一个 ng-repeat：

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

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

我的问题是，是否可以在 ng-repeat 中使 src 根据 item.photo 更改其值。

似乎给 src 一个变量是行不通的：

<img src=item.photo  > 

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

<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' "  > 
</div>

【参考方案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'"  > 
</div>

如果您想将item.photo 的值直接分配给src，那么您可以这样做：

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