Question

此tutorial演示了使用指令ngSrc代替src：

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

他们要求：

用普通的旧src属性替换ng-src指令。
使用Firebug或Chrome的Web Inspector等工具，或者检查网络服务器访问日志，确认该应用确实正在制作对 /app/%7B%7Bphone.imageUrl%7D%7D 的无关请求（或的 /应用/ {{phone.imageUrl}} ）。

我这样做了，它给了我正确的结果：

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

有原因吗？

Answer 1

来自Angular docs

写它的错误方法：

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

写它的正确方法：

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

为什么呢？这是因为在页面加载时，在角度引导和控制器创建之前，浏览器将尝试从http://www.gravatar.com/avatar/{{hash}}加载图像，它将失败。然后，一旦开始出现角度，它就会理解{{hash}}必须替换为logo.png，现在src属性更改为http://www.gravatar.com/avatar/logo.png并且图像正确加载。问题是有2个请求正在进行，第一个请求失败。

要解决此问题，我们应该使用ng-src这是一个角度指令，只有在角度自举和控制器完全加载后，angular才会将ng-src值替换为src属性，并且那时{{hash}}已被替换为正确的范围值。

Answer 2

<img ng-src="{{phone.imageUrl}}">

这为您提供了预期的结果，因为phone.imageUrl被评估并在加载角度后由其值替换。

<img src="{{phone.imageUrl}}">

但是有了这个，浏览器会尝试加载名为{{phone.imageUrl}}的图像，这会导致请求失败。您可以在浏览器的控制台中查看此内容。

Answer 3

src="{{phone.imageUrl}}"是不必要的，并且浏览器会创建额外的请求。浏览器将至少发出2 GET次尝试加载该图片的请求：

在评估表达式{{phone.imageUrl}}
在评估表达式img/phones/motorola-xoom.0.jpg

在处理Angular表达式时，应始终使用ng-src指令。 <img ng-src="{{phone.imageUrl}}">为您提供单个请求的预期结果。

在旁注上，同样适用于ng-href，因此在第一个摘要周期开始之前，您不会断开链接。

Answer 4

实际上它有100％的意义，因为HTML会按顺序处理，当这个HTML页面逐行处理时，当它到达此图像，行和处理图像时，我们的phone.imageUrl是尚未确定。

事实上，Angular JS尚未处理这一块HTML，并且还没有找到这些占位符并用值替换这些表达式。所以最终发生的事情是浏览器获取此行并尝试在此URL处获取此图像。

当然这是一个虚假的URL，如果它仍然有那些胡子和花括号，因此它给你一个404，但是当然Angular会解决这个问题，它会用这个URL替换正确的URL ，然后我们仍然看到图像，但404错误消息仍保留在我们的控制台中。

那么，我们怎样才能解决这个问题呢？好吧，我们不能使用常规的HTML技巧来处理这个问题。但是，我们可以使用Angular来处理它。我们需要以某种方式告诉浏览器不要尝试获取此URL，但同时只有在Angular准备好解释这些占位符时才能获取它。

嗯，一种方法是在这里放置一个Angular属性而不是标准的HTML属性。而Angular属性只是ng-src。因此，如果我们现在这样说，那么回过头来，你会发现它已经没有错误了，因为一旦Angular获得了这个HTML并将所有表达式转换为它们的值，该图像才被获取。

使用ng-src vs src

4 个答案: