使用ng-src vs src
本教程演示如何使用指令ngSrc而不是src ：
<ul class="phones"> <li ng-repeat="phone in phones" class="thumbnail"> <img ng-src="{{phone.imageUrl}}"> </li> </ul>
他们要求：
用普通的旧src属性replaceng-src指令。
使用诸如Firebug或Chrome的Web Inspector之类的工具，或者检查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>
有什么原因吗？
<img ng-src="{{phone.imageUrl}}">
这给你预期的结果，因为phone.imageUrl被评估，并加载angular度后，它的价值取代。
<img src="{{phone.imageUrl}}">
但是，浏览器尝试加载名为{{phone.imageUrl}}的图像，导致请求失败。 您可以在浏览器的控制台中查看。
来自Angular文档
写错误的方法是：
<img src="http://www.gravatar.com/avatar/{{hash}}"/>
正确的写法是：
<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
为什么？ 这是因为在加载页面之前，angular度引导和控制器创build之前，浏览器会尝试从http://www.gravatar.com/avatar/{{hash}}下载图片，并且会失败。 然后一旦angular度开始，它就会理解{{hash}}必须被replace为logo.png ，现在src属性变为http://www.gravatar.com/avatar/logo.png ，图像正确加载。 问题是有2个请求，第一个失败。
为了解决这个问题，我们应该使用ng-src这是一个angular度指令，angular度只有在angular度引导和控制器被完全加载之后才会将ng-src值replace为src属性，并且在那个时候{{hash}}已经被正确的范围值。
src="{{phone.imageUrl}}"是不必要的，并且由浏览器创build额外的请求。 浏览器将至less2个GET请求试图加载该图像：
- 在评估expression式
{{phone.imageUrl}} - expression后评估
img/phones/motorola-xoom.0.jpg
在处理Angularexpression式时，您应该始终使用ng-src指令。 <img ng-src="{{phone.imageUrl}}">提供单个请求的预期结果。
在附注中 ，这同样适用于ng-href因此在第一个摘要循环开始之前您不会断开链接。
那么实际上它是100％的意义，因为HTML顺序处理，当这个HTML页面逐行处理，到这个图像，行和处理图像时，我们的phone.imageUrl尚未定义。
事实上，Angular JS还没有处理这个HTML块，还没有寻找这些占位符，并用这些值replace这些expression式。 所以最终发生的事情是浏览器得到这一行，并试图在这个URL获取这个图像。
当然这是一个伪造的URL，如果它仍然有胡须和大括号，所以它会给你一个404，但是当然Angular会照顾这个，它将replace这个URL为正确的URL，然后我们仍然看到图像，但仍然在我们的控制台中的404错误消息。
那么，我们该怎么处理呢？ 那么，我们不能用常规的HTML技巧来处理这个问题。 但是，我们可以使用Angular来照顾它。 我们需要以某种方式告诉浏览器不要试图获取这个URL，但同时只有当Angular准备解释这些占位符时才能获取它。
那么，这样做的一个方法就是在这里放置一个Angular属性而不是标准的HTML属性。 Angular属性只是ng-src 。 所以，如果我们现在说，回过头来，你会发现没有错误了，因为一旦Angular掌握了这个HTML，并将所有的expression式转化为它们的值，图像才会被抓取。
