Question

我有一些重复的图像。

<img ng-src="{{::data.image}}" />

的CSS：

.thumbnailImage {
  width: auto;
  max-width: 20px;
  height: auto;
  max-height: 20px;
  border: 1px solid lightslategrey;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white; /* in case of png */
  }

{{data.image}}中的一些为空。我想删除它们。

<img ng-src="{{::data.image}}" onerror="this.remove()" />

然而，当我这样做时，我在图像上的1px边框仍然存在？

在此之前我有一个ng-if语句（ng-src！= null），但我发现在角度观察者中这太贵了。

https://jsfiddle.net/8ykrkc3c/

Answer 1

试试这个

<div ng-if="data.image">
   <img  ng-src="{{::data.image}}"  />
</div>

修改

你可以使用custome dirctive。

angular.module("app", []) .controller("MainCtrl", function($scope) { $scope.value = "https://www.google.co.in/images/srpr/logo11w.png"; // $scope.value = "null"; }) .directive('custSrc', function() { return { restrict: "A", scope: { value: "=custSrc" }, link: function(scope, element, attrs) { if(scope.value == 'null') element.parent().addClass('hide'); else element.attr('src', scope.value); console.log(element); } }; });

.hide{ display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="MainCtrl"> <img cust-src="value" /> </div>

Answer 2

您的onerror处理程序不正确。请注意，它不再是Angular属性，因此您无法使用angular.element.prototype.remove方法。相反，您需要使用旧的原生DOM方法，在您的情况下removeChild：

<img class="asd" ng-src="{{::data.image}}" onerror="this.parentNode.removeChild(this)" />

演示： https://jsfiddle.net/8ykrkc3c/2/

使用ng-src在img上删除（），边框仍然存在？

2 个答案: