ng-src 与 src 的使用 [英] Use of ng-src vs src

问题描述

这个教程演示了指令ngSrc的使用 而不是 src :

This tutorial demonstrates the use of the directive ngSrc instead of 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 Inspector 等工具，或检查网络服务器访问日志，确认该应用程序确实在制作对 /app/%7B%7Bphone.imageUrl%7D%7D 的无关请求(或/app/{{phone.imageUrl}}).

Replace the ng-src directive with a plain old src attribute.
Using tools such as Firebug, or Chrome's Web Inspector, or inspecting the webserver access logs, confirm that the app is indeed making an extraneous request to /app/%7B%7Bphone.imageUrl%7D%7D (or /app/{{phone.imageUrl}}).

我这样做了，它给了我正确的结果:

I did so and it gave me the correct result:

<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 后被评估并替换为其值.

This gives you expected result, because phone.imageUrl is evaluated and replaced by its value after angular is loaded.

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

但是，浏览器会尝试加载名为 {{phone.imageUrl}} 的图像，从而导致请求失败.您可以在浏览器的控制台中查看.

But with this, the browser tries to load an image named {{phone.imageUrl}}, which results in a failed request. You can check this in the console of your browser.

这篇关于ng-src 与 src 的使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！