仅当 Angular 中存在图像时才显示图像元素答案

【问题标题】：Show Image Element only if image exists in Angular仅当 Angular 中存在图像时才显示图像元素
【发布时间】：2016-08-24 18:36:18
【问题描述】：

我有两个同级元素。一个是图像，另一个是 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 个产品，当它遍历所有图像时，页面变得非常非常慢。

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

【问题讨论】：

你可以试试 ng-if 而不是 ng-show。 ng-if 将其从 dom 中删除。不过，我不能说这会带来什么性能提升。
没有图片时为什么不能product.img === null或undefined？
ng-if 不检查图像是否存在。我想检查图像是否存在

标签： javascript html angularjs image

【解决方案1】：

上面的这些解决方案都很好。但我建议你将onError事件逻辑放在一个指令中，并使用ng-if来控制可见性。

var myApp = angular.module('myApp', [])

.directive('img', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '='
    },
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        scope.ngModel.shown = false;
        scope.$apply();
      });
    }
  }
})

.controller('MyController', function($scope) {
  $scope.images = [];
  for (var i = 0; i < 10; i++) {
    if (i == 5) {
      $scope.images[i] = {
        url: 'http://www.notfound.com.fr/404.png'
      };
      continue;
    }
    $scope.images.push({
      url: 'https://unsplash.it/50/50/?random=' + i
    });
  }
});

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <title></title>
</head>

<body ng-app="myApp" class="ng-scope">
  <div ng-controller="MyController">
    <div ng-repeat="image in images" ng-init="image.shown=true">
      <p ng-if="!image.shown">
        Empty image here...
      </p>
      <img ng-model="image" ng-if="image.shown" ng-src="{{ image.url }}">
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

您可以使用自定义指令来完成此操作。见 Plunker：http://plnkr.co/edit/yBb0rNiXIaO4EGTqCAmm?p=preview

您需要将is404 附加到您的每张图片：

for(var i = 0; i < products.length; ++i) {
    products[i].image.is404 = false;
}

然后显示它们。您需要将$index 作为索引属性传递，以便在指令中使用它。

<img ng-if="!image.is404" on-src-error index="{{$index}}" src="{{image.image}}" />
<div ng-if="image.is404">Uh oh!  Image 404'd.</div>

自定义指令：

app.directive("onSrcError", function() {
  return {
    link: function(scope, element, attrs) {
     element.bind('error', function() {
       //set 404 to true and apply the scope
       scope.images[attrs.index].is404 = true;
       scope.$apply();
     });
    }
  };
});

【讨论】：

我不想显示任何其他空白图像。我想隐藏它并显示其他元素

【解决方案3】：

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

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

【讨论】：

上面写着product not defined
是的，你需要调用引用范围变量。答案已更新。