28

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}} 的值。

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

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

4

4 回答 4

32

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

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

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

通过此更改，src属性的内容在数据到达之前为空。

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

于 2013-07-02T10:34:59.380 回答
11

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)这与您服务器上的目录/文件访问限制有些相关。

于 2013-11-29T14:24:43.737 回答
6

我相信 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 值

于 2013-03-15T13:52:24.657 回答
0

像其他人一样，您始终可以在图像完全加载到页面上之前显示加载标志。这是一个包含演示的小提琴。您可以在加载之前在背景中使用不同的图像.css('background-image','url('+ url_link_var +')');

这是完成并显示在Fiddle中。

于 2013-12-02T07:00:58.180 回答