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检查器之类的工具，或检查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}}，从而导致请求失败。您可以在浏览器的控制台中进行检查。