Angular在ng-repeat中的图像标签中使用ng-src

Question

我在ng-repeats中多次使用ng-src成功，但由于某些原因我无法使用这个。

我有一个返回一些数据的API调用，对于返回中的每个项目，我基本上都是这样做的：

<div ng-repeat="item in APIreturn">
    <img ng-src="{{item.url}}" />
</div>

我还尝试了src="{{item.url}}"，ng-src="item.url"等等。我已经验证了正在使用的网址是有效的，并且在ng-repeat之外的src="{{item.url}}"中工作正常。

为什么在ng-repeat中它会有所不同？

当前HTML

<table ng-repeat="user in userInformation">
    <tr>
        <td>UserName:</td>
        <td>{{user.UserName}}</td>
    </tr>
    <tr>
        <td>Address:</td>
        <td>{{user.Address}}</td>
    </tr>
    <tr>
        <td>Gender:</td>
        <td>{{user.Gender}}</td>
    </tr>
    <tr>
        <td>Image:</td>
        <td><img ng-src"user.image" /></td>
    </tr>
</table>

Answer 1

尝试改变这一点。我想你忘了在=之后放ng-src。

  <tr>
    <td>Image:</td>
    <td><img ng-src = "user.image" /></td>
  </tr>

Answer 2

如果你只放<td>{{ user.image }}</td>，你说你没有看到网址。这表示您访问yout对象上不存在的属性。试试json filter：

<td>{{ user | json }}</td>

查看更多您的对象。我可以看到，你使用大写字母，但是user.image是较低的。

编辑：这是一个有效的plunkr。

EDIT2：你错过了分配标志。

Answer 3

请参阅Strict Contextual Escaping服务。

Angular unsafes img src属性，因此您需要信任它才能使您的图像可用。

另一种方法是使用css to render the images：

Answer 4

对于表，在 ng-repeat 中，您必须使用{{}}插值才能访问src文件。
试试这个：

<td><img ng-src = "{{user.image}}"/></td>

让我知道是否有任何问题。