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}}">&nbsp;这会给您预期的结果，因为phone.imageUrl在加载角度后会对其进行评估并替换为其值。<img src="{{phone.imageUrl}}">但与此同时，浏览器尝试加载名为的图像{{phone.imageUrl}}，从而导致请求失败。您可以在浏览器的控制台中进行检查。

Answer 2

该src="{{phone.imageUrl}}"是不必要的，并创建浏览器的额外要求。浏览器将至少发出2个GET尝试加载该图像的请求：在计算表达式之前 {{phone.imageUrl}}表达式求值后 img/phones/motorola-xoom.0.jpgng-src处理Angular表达式时，应始终使用指令。<img ng-src="{{phone.imageUrl}}">为您提供单个请求的预期结果。顺便说一句，这同样适用于ng-href您，直到第一个摘要循环开始之前您都不会断开链接。