ng-src和src的使用

Question

本教程演示了使用指令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>有什么理由吗？

Answer 1

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

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

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

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

Answer 2

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

在计算表达式之前 {{phone.imageUrl}}

表达式求值后 img/phones/motorola-xoom.0.jpg

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

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