本教程演示了指令的使用,ngSrc而不是src:
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>
有什么原因吗?
<img ng-src="{{phone.imageUrl}}">
这会给您预期的结果,因为phone.imageUrl在加载角度后会对其进行评估并替换为其值。
phone.imageUrl
<img src="{{phone.imageUrl}}">
但与此同时,浏览器尝试加载名为的图像{{phone.imageUrl}},从而导致请求失败。您可以在浏览器的控制台中进行检查。
{{phone.imageUrl}}