Question

如果图片无法正确加载，我之前已经使用过这种指令作为后备图片。

app.directive('fallbackSrc', function () {
var fallbackSrc = {
    link: function postLink(scope, element, attrs) {
      element.bind('error', function() {
        angular.element(this).css("background-image", attrs.fallbackSrc);
      });
    }
   }
   return fallbackSrc;
});

当它放在这样的html上时，这很有效，当然该指令会替换图像的src而不是修改css：

<img fallback-src="http://google.com/favicon.ico" ng-src="{{image}}"/>

我目前有一个背景图片：

 <div class="issue-gallery-container" fallback-src="http://google.com/favicon.ico" style="background-image: url({{ AWS }}images/cover/{{ item.volume.number }}.{{ item.number }}.png)">

 </div>

该指令现在不会拾取元素上的错误，因为它出现在元素css中。如何修改指令以侦听元素background-image上的错误？

Answer 1

我会设置一个＆＃34;虚拟＆＃34;改变其父css的img指令。或者你可以创建一个模板来简化事情。

这是一个工作的掠夺者http://plnkr.co/edit/334WIH2VUGReVTUYt2Tb?p=preview 代码有点乱，但它有效。

app.directive('backgroundFallbackSrc', function () {
  return {
    link : function(scope, element, attrs) {
      element.bind('error', function() {
         element.parent().css('background-image', 'url("' + attrs.backgroundFallbackSrc + '")');
      });
    }
   }
});

HTML

<div class="issue-gallery-container" style="display:block; height:2000px;">
   <img background-fallback-src="http://keithfimreite.com/BlogFiles/keithfimreite/SAAS.jpg" 
    ng-src="{{invalidImage}}" style="display:none;">        
</div>

背景图像错误的角落后图像

1 个答案: