NG-SRC SRC VS使用 [英] Use of ng-src vs src

问题描述

本教程演示了如何使用指令 ngSrc 而不是的src ：

 ＆LT; UL类=手机＆GT;
    ＆LT;李NG重复=手机手机类=缩略图＆GT;
        ＆LT; IMG NG-SRC ={{phone.imageUrl}}＆GT;
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

他们要求：

  

替换一个普通的老src属性的NG-SRC指令。结果
  使用工具，如萤火虫，或Chrome的Web检查，或检查
  Web服务器的访问日志，确认该应用程序确实作出
  外来请求的 /app/%7B%7Bphone.imageUrl%7D%7D （或
   /应用/ {{phone.imageUrl}} ）。

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

 ＆LT;李班=缩略图NG-范围NG重复=手机中的手机＆GT;
    ＆LT; IMG SRC =IMG /手机/摩托罗拉xoom.0.jpg＆GT;
＆LT; /李＆GT;
 

时有一个原因？

解决方案

 ＆LT; IMG NG-SRC ={{phone.imageUrl}}＆GT;
 

这让你期望的结果，因为 phone.imageUrl 评估和角被加载后，它的值替换。

 ＆LT; IMG SRC ={{phone.imageUrl}}＆GT;
 

但有了这个，浏览器尝试加载一个名为图片 {{} phone.imageUrl} ，这将导致失败的请求。
您可以在浏览器的控制台来检查一下。

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>

They ask to:

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>

Is there a reason why?

解决方案

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

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

<img src="{{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 VS使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！