使用ng-src vs src

Question

本教程演示了使用该指令ngSrc而不是src:

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

他们要求:

将ng-src指令替换为普通的旧src属性.
使用工具(如Firebug),或Chrome的Web检查,或检查Web服务器的访问日志,确认该应用确实使外来请求/app/%7B%7Bphone.imageUrl%7D%7D(或 /应用/ {{手机.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}}必须用say替换logo.png,现在src属性改变为,http://www.gravatar.com/avatar/logo.png并且图像正确加载.问题是有2个请求正在进行,第一个请求失败.

为了解决这个问题,我们应该使用ng-src哪个是角度指令,而角度将仅在角度自举和控制器完全加载后将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尝试加载该图像的请求:

1. 在评估表达式之前 {{phone.imageUrl}}
2. 在评估表达式之后 img/phones/motorola-xoom.0.jpg

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

在旁注中,同样适用于ng-href您在第一个摘要周期开始之前不会断开链接.