javascript - 仅当 Angular 中存在图像时才显示图像元素

Question

我有两个兄弟元素。一个是图像，另一个是 div。如果图像存在，我想显示图像元素；如果图像不存在，我想显示 div 元素。我的元素看起来像

 <img ng-show="product.img" ng-src="{{product.img}}" />
 <div class="left margin-right-1 line-height-15" ng-hide="product.img">{{product.img}}</div>

product.img 的结果类似于 /assets/images/prod.jpg。因为这是一个字符串，所以 ng-show 将始终为真，并且将显示图像标签。因此，如果图像不存在，它将显示为损坏的图像。所以基本上我想要的是，如果图像不存在，则隐藏图像标签并显示 div，反之亦然。

我试过像这样的javascript函数

 $scope.imageExists = function(src) {
  var image = new Image();
  image.src = src;
  if (image.width == 0) {
      return false;
  } else {
      return true;
  }
}

并且改变了我的图片标签

 <img ng-show="product.img" ng-src="{{imageExists(product.img)}}" />

但这非常昂贵。我每页有 100 个产品，当它遍历所有图像时，页面变得非常非常慢。

那么，如果图像存在与否，任何人都可以指导我以 Angular 显示和隐藏图像元素的最佳方式是什么。

Answer 1

在图像中使用 onError 事件来禁用 ng-show 中使用的变量

<img ng-show="product.img" ng-src="{{product.img}}" onError="angular.element(this).scope().product.img = false"/>