一尘不染

ng-src和src的使用

angularjs

教程演示了指令的使用,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>

有什么原因吗?


阅读 248

收藏
2020-07-04

共1个答案

一尘不染

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

这会给您预期的结果,因为phone.imageUrl在加载角度后会对其进行评估并替换为其值。

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

但与此同时,浏览器尝试加载名为的图像{{phone.imageUrl}},从而导致请求失败。您可以在浏览器的控制台中进行检查。

2020-07-04