ng-src和src的使用

Question 1

本教程演示了指令的使用，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检查器之类的工具，或检查网络服务器访问日志，确认该应用确实确实对/app/%7B%7Bphone.imageUrl%7D%7D（或 / app / {{phone .imageUrl}}）。

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

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

有什么理由吗？

Question 2

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

这会给您带来预期的结果，因为phone.imageUrl在加载角度后会对其进行评估并替换为其值。

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

但与此同时，浏览器尝试加载名为的图像{{phone.imageUrl}}，从而导致请求失败。您可以在浏览器的控制台中进行检查。

Question 3

来自Angular文档

编写它的错误方式：

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

正确的编写方式：

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

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

为了解决这个问题，我们应该使用ng-srcangular指令，并且只有在角度引导程序和控制器完全加载后，angular才会将ng-src值替换为src属性，并且届时已经被正确的作用域值替换了。{{hash}}

Question 4

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

在计算表达式之前 {{phone.imageUrl}}
表达式求值后 img/phones/motorola-xoom.0.jpg

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

顺便说一句，这同样适用于ng-href您，直到第一个摘要循环开始之前您都不会断开链接。

Question 5

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

实际上，Angular JS尚未处理这部分HTML，也尚未寻找这些占位符并将这些表达式替换为值。因此最终发生的事情是浏览器获取了这一行，并尝试在此URL上获取此图像。

当然，这是一个伪造的URL，如果它里面仍然留着那些胡须和花括号，因此它为您提供了404，但是当Angular处理完这个之后，它将用该URL替换为正确的URL，然后我们仍然可以看到该图像，但是404错误消息仍保留在我们的控制台中。

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

嗯，一种实现方法是在此处放置Angular属性，而不是标准HTML属性。并且Angular属性是just ng-src。因此，如果我们现在这样说，请返回，您将看到不再有错误，因为仅在Angular拥有此HTML并将所有表达式转换为它们的值之后，才获取图像。