Javascript AngularJS检查图像404并获取图像src的动态URL

这是我的中继器：

<div ng-click="selected(entity)" ng-if="entity.is_organization == true">
    <div class="row">
        <div class="cell info">
            <span class="text" ng-bind-html="entity.label"></span>
        </div>
        <div class="cell img" ng-show="isImageAvailable">
            <img class="image" ng-src="checkImageAvailable(entity.thumbnail[0])">
        </div>
    </div>
</div>

我从JSON中获得了

实体.thumbnail[0]

，但即使它有一个URL，它也不存在。因此，我确实使用

checkImageAvailable

检查它。如果图像不可用，请将

isImageAvailable

设置为false，这样图像父容器

ng show

会在浏览器中隐藏图像占位符。 同时在控制台日志上显示：

http://localhost/checkImageAvailable（entity.缩略图[0]）

是

404

---

我在AngularJS面前可能犯了什么错误。

有一件事是错的，在你设定的时间：

$scope.isImageAvailable = true; //or false

您处于angular生命周期之外-因此必须调用

$scope.$apply（）

在角度事件之外对角度范围进行任何更改时，都必须调用

$apply（）

检查isImageAvailable可能是错误的，因为

onerror/onload

将被异步回调，因此您可以立即返回

image\u url

编辑

因此，您必须调用如下方法：

ng-src="{{checkImageAvailable(entity.thumbnail[0])}}"

但是有一个问题，因为angular一直在循环中调用该方法。 即使你这样做了：

ng-src="{{::checkImageAvailable(entity.thumbnail[0])}}"

它仍然会被呼叫3次。我不知道为什么

因此，在这一点上，我将尝试一种不同的方法：自定义指令。当它初始化时，将图像设置为隐藏，将onload/onerror处理程序附加到元素，然后根据调用的对象，显示图像或不显示图像

如果没有道理，请告诉我。

---

演示：

$scope.$apply（函数（）{$scope.isImageAvailable=true；//或false；}）；这就是你的意思吗？你可以这样做，或者只调用$scope.$apply（）。我创建了一个jsbin示例。。但是由于某些原因，它反复调用新图像

onload

是异步的，因此您的函数永远不会返回url。

ng-src="{{::checkImageAvailable(entity.thumbnail[0])}}"