如何防止ng-src在数据到达之前加载图像？

Question

HTML:

 <img ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}" alt="{{album.title}}" />

在运行应用程序时,它显示错误:

GET http://url.com/myApp/files/album_images/image/ 403 (Forbidden) 

" http://url.com/myApp/files/album_images/image/ "是{{plugins.filesPath.album_images.image}}的值.

它显示错误,因为它会在所有数据到达之前加载图像.

如何在控制台中防止此错误？

Answer 1

尝试使用条件模式 condition && true || false

因此修改ng-src属性如下:

<img ng-src="{{ album && plugins.filesPath.album_images.image + album.cover_image || '' }}" alt="{{album.title}}" />

通过此更改,src属性的内容为空,直到数据到达.

来源: 根据模型数据有条件地改变img src

Answer 2

2015年3月更新

使用Angular 1.3.x应该使大多数自定义数据检查过时,因为$ interpolate现在包含一个标志"allOrNothing",它将等待所有绑定不是未定义的,而是在实际解析表达式之前.

因此,在这种情况下,ng-src只会插入src属性一次album_images.image 并 album.cover_image准备就绪.尽管如此,根据您的设置,album.title可能还没有准备好,所以如果您想等待,您仍然可以使用该isDataAvailable()方法.

原答案:

现在ng-if,有人可以试试

<img ng-if="isDataAvailable()" ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}" alt="{{album.title}}" />

$scope.isDataAvailable = function(){
    // do your data checks here and
    // return true;
}

这样,图像只会在isDataAvailable返回时附加到DOM,true然后ng-src才会启动并尝试获取文件.

不过,我很确定,403 (Forbidden)这与您服务器上的目录/文件访问限制有些相关.

Answer 3

我相信ng-src会等待更改为将src值应用于元素的值.你有没有尝试过改变

<img ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}"

至

<img ng-src="{{plugins.filesPath.album_images.image + album.cover_image}}" ？

编辑 - 修改后的答案

当ng-src等待{{}}中的信息发生变化时,它无法知道它的每个方面是否都已准备就绪.我可以想到两种可能的解决方案:

a)创建一个url_when_ready()函数,它将字符串作为参数并连接它们,只有在定义了所有字符串时才返回一个值.然后做

ng-src="{{url_when_ready([plugins.filesPath.album_images.image, album.cover_image])}}

b)创建一个模型$ scope.album.cover_image_full,在$ scope.album.cover_image准备就绪时更新,并将其用作ng-src值