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属性的内容在数据到达之前为空。

来源： Conditionally change img src based on model data

Answer 2

2015年3月更新

使用Angular 1.3.x应该使大多数自定义数据检查过时，因为$interpolate now includes a flag "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返回true，图片就会被附加到DOM，只有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值

Answer 4

与其他人一样，您可以在图像完全加载到页面之前显示加载标记。 here is a fiddle包含演示。您可以在使用.css('background-image','url('+ url_link_var +')');

加载之前在后台使用其他图片

这已完成并显示在Fiddle。

中

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

4 个答案:

2015年3月更新

原始答案：