在插入变量

Question

我有一个相当简单的ng-repeat，它迭代一个AngularJS指令来显示来自对象数组的图像，其中每个JSON对象都有一个带有图像URL的img属性。一切正常，除了在网络工具中我可以看到浏览器试图将图像源URL加载为{{ data.img }}，然后插入其实际值，它让我疯狂试图弄清楚为什么会这样。

以下是我的代码的相关部分：

的index.html

<div ng-repeat="data in obj">
    <feed-item></feed-item>
</div>

feedItem.html（指令）

<div class="item">
    <img src="{{ data.img }}" />
</div>

Angular指令

app.directive("feedItem", function() {
   return {
        restrict: 'E',
        templateUrl: 'assets/directives/feedItem.html',
        replace: true
   };
});

这导致图像呈现正常，但如上所述，以下内容显示在网络工具中：

正如您所见，JSON对象数组中的所有2个图像都可以正常加载，但我有浏览器尝试进行的额外请求，以及＆＃34;发起人＆＃34;专栏刚说＆＃34;其他＆＃34;这不是很有帮助。知道为什么要发送这个请求吗？

Answer 1

正如matthewdaniel所说，ng-src可以解决你的问题。它阻止浏览器在角度可以开始之前尝试加载图像源，你就像普通图像上的'src'属性一样使用它。