Javascript 浏览器尝试在ng重复处理之前渲染图像

我有一个简单的例子：一些对象通过ng repeat输出到html页面。每个对象都有要显示的图像路径。问题是：尽管我有一个空的对象数组，但似乎浏览器试图加载错误URL的图像（我通过firebug看到404个错误）。代码：

{{item.name}}

我在firebug中看到的错误：

网络错误：找不到404-

---

因此，浏览器似乎试图在angularjs处理其指令之前加载图像。除了这个错误，一切都很顺利。但是，我想消除这个问题。我如何才能做到这一点？

使用

ngsrc

。这是angular.js对这个问题的解决方案

ng src

防止浏览器“跳伞”，仅在

项的值正确解析后加载图像。imageUrl

的值

在ng src上引用以下内容：

在src属性中使用像{{hash}}这样的角度标记是行不通的 右图：浏览器将从URL获取文本 {{hash}}直到Angular替换了{{hash}内的表达式。这个 ngSrc指令解决了这个问题

因此，您的代码将变成：

<img height="160" ng-src="{{item.imageUrl}}" class="img-rounded"><br>

<img height="160" ng-src="{{item.imageUrl}}" class="img-rounded"><br>