仅当图像存在于Angular中时显示图像元素

Question

我有两个同级元素。一个是图像，另一个是div。我想显示image元素（如果image存在）和show div元素（如果image不存在）。我的元素看起来像

 <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将始终为true，并且将显示image标签。因此，如果图像不存在，它将显示为残破图像。所以基本上我想要的是如果图像不存在，则隐藏图像标签并显示div，反之亦然。

我已经尝试过像

 $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种产品，当它遍历所有图像时，页面变得非常非常慢。

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

Answer 1

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

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