角度没有足够快地加载以防止ng-repeat错误

Question

我的模板中有一个漂亮的van-ng-repeat语句,用于重复表中的一组图像:

<tr ng-repeat="d in data">
     <td><img src={{d.image}}></img></td>
</tr>

所有图像都正确加载(它们都存在并且它们都显示在表中)但是当我在本地测试时(以及我部署时),我在控制台中看到以下错误:

Failed to load resource: the server responded with a status of 404 (File not found) http://localhost:8000/%7B%7Bd.image%7D%7D

我认为这里发生的是在Angular加载之前抛出错误 - 这是有道理的,因为没有Angular,寻找{{d.image}}应该抛出错误 - 然后一旦Angular加载,图像就会正确加载.

在加载Angular之前,如何让浏览器不尝试渲染{{d.image}}？我把ng-cloak到<body>标签,但似乎并不被帮助.我是否正在考虑这个正确的方法？

Answer 1

当您使用该src属性插入图像的路径时,往往会出现此问题.使用ng-src而不是使用该src属性.

<tr ng-repeat="d in data">
     <td><img ng-src="{{d.image}}"></td>
</tr>