javascript - AngularJS 检查图像是否有 404 并获取图像 src 的动态 URL

Question

这是我的中继器:

<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>

checkImageAvailable 在 Controller 中:

$scope.isImageAvailable = false;
$scope.checkImageAvailable = function(image_url){
  var img = new Image();
  img.onload = function (){
    $scope.isImageAvailable = true;
  };
  img.onerror = function (){
    $scope.isImageAvailable = false;
  };
  img.src = image_url;
  if($scope.isImageAvailable){
     return image_url;
  }
};

我从 JSON 中获取了 entity.thumbnail[0]，但即使它有 URL，它也不存在。所以我使用 checkImageAvailable 检查它。如果图像不可用，请将 isImageAvailable 设置为 false，以便图像父容器 ng-show 会在浏览器中隐藏图像占位符。 同时在控制台日志上显示: http://localhost/checkImageAvailable(entity.thumbnail[0]) 是 404

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

Answer 1

有一点是错误的，当你设置时:

$scope.isImageAvailable = true; //or false

你在 Angular 生命周期之外 - 所以你必须调用 $scope.$apply();

每当您在 Angular 事件之外更改 Angular 范围时，都必须调用 $apply()。

检查 isImageAvailable 可能会错误，因为 onerror/onload 将被异步回调，因此您可以立即返回 image_url。

编辑

所以事实证明您必须调用如下方法:

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

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

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

它仍然被调用 3 次。不知道为什么 3.

所以此时我会尝试使用不同的方法:自定义指令。当它初始化时，您将图像设置为隐藏，将 onload/onerror 处理程序附加到元素，然后根据调用哪个处理程序，显示或不显示图像。

如果没有意义，请告诉我。 演示:http://jsbin.com/yenipodimi/1/edit?html,js,output