AngularJS检查image是否为404，并获取image src的动态URL

AngularJS check image for 404 and get dynamic URL for image src

本文关键字：image src 获取 动态 URL 检查 是否 AngularJS      更新时间：2023-09-26

这是我的中继器:

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

$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前面做的可能是什么错误

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

$scope.isImageAvailable = true; //or false

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

任何时候你在angular事件之外改变angular作用域，你必须调用$apply()。

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

编辑

所以你需要调用这样的方法:

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

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

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

仍然会被调用3次。我不知道为什么

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

让我知道如果它不合理。演示:http://jsbin.com/yenipodimi/1/edit?html、js、输出

相关文章：