浏览器尝试在ng-repeat处理之前渲染图像

时间:2015-12-15 21:10:14

标签: javascript html angularjs

我有一个简单的例子:一些对象通过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处理其指令之前加载图像。除了这个错误,一切都运作良好。但是,我想消除这个问题。我怎么能这样做?

1 个答案:

答案 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>