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

Question

我在 ng-repeats 中多次在 img 标签上使用 ng-src 并取得成功，但由于某种原因我无法使用它。

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

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

我也试过src="{{item.url}}"、ng-src="item.url"等等。我已经验证正在使用的 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>，你说你看不到 url。这表明您访问的对象不存在属性。尝试 json filter:

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

查看更多您的对象。如我所见，您使用大写字母，但 user.image 是小写字母。

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

EDIT2：你缺少赋值符号。

Answer 3

查看 Strict Contextual Escaping 服务。

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

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

Answer 4

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

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

如果有任何问题，请告诉我。

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

Angular use ng-src in an image tag within ng-repeat

javascript

angularjs

ng-repeat