我有一个简单的例子:一些对象通过ng-repeat输出到html页面。每个对象都有一个显示图像的路径。这是问题所在:即使我有一个空数组的对象,似乎浏览器尝试使用错误的URL加载图像(我通过firebug看到404错误)。代码:
<ul class="thumbnails">
<div class="row-fluid" ng-repeat="item in searchItems" ng-if="$index%2==0">
<div class="span5" ng-repeat="item in searchItems|limitTo:2:$index">
<div class="thumbnail" style="border-style:none;box-shadow: 0 0 0 0;">
<b>{{item.name}}</b><br>
<img height="160" src="{{item.imageUrl}}" class="img-rounded"><br>
</div><!--thumbnail-->
</div><!--span-->
</div>
</ul>
我在firebug中看到的错误:
NetworkError:404 Not Found - {{3}}
因此,似乎浏览器尝试在angularjs处理其指令之前加载图像。除了这个错误,一切都运作良好。但是,我想消除这个问题。我怎么能这样做?
答案 0 :(得分:3)
使用ng-src
。这是angular.js解决这个问题的方法。 ng-src
会阻止您的浏览器“跳枪”,只有在item.imageUrl
的值得到正确解析后才会加载图片。
引用ng-src上的Angular docs:
在src属性中使用{{hash}}之类的Angular标记不起作用 右:浏览器将使用文字文本从URL中获取 {{hash}}直到Angular替换{{hash}}中的表达式。该 ngSrc指令解决了这个问题。
所以,你的代码将成为:
<img height="160" ng-src="{{item.imageUrl}}" class="img-rounded"><br>