angularjs - 如果加载的 ng 样式图像是无效 url，则背景默认图像

Question

我正在像这样向我的 div 添加背景图片

ng-style="{'background-image' : 'url('+ myvariable.for.image +')'}">

其中 myvariable.for.image 是一个类似/examplesite/image/id 的 url

这工作正常，但有一个异常(exception)，如果图像不存在，它就什么都不做，而且我的背景看起来太单调了......如果图像不存在，我希望能够用默认图像替换它。

但我似乎无法弄清楚如何

Answer 1

我将为此使用自定义指令，而不是 ngStyle。比如下面的。这将检查是否提供了属性，如果提供，它会尝试加载该图像。如果它加载了一张图片，那么我们就为它设置背景图片，否则我们使用默认图片。

myApp.directive('bgImage', function () {
    return {
        link: function(scope, element, attr) {

            attr.$observe('bgImage', function() {           
              if (!attr.bgImage) {
                 // No attribute specified, so use default
                 element.css("background-image","url("+scope.defaultImage+")");
              } else {
                 var image = new Image();  
                 image.src = attr.bgImage;
                 image.onload = function() { 
                    //Image loaded- set the background image to it
                    element.css("background-image","url("+attr.bgImage+")");
                 };
                 image.onerror = function() {
                    //Image failed to load- use default
                    element.css("background-image","url("+scope.defaultImage+")");
                 };
             }
         });
      }
    };
});

这样使用:

 <div bg-image="{{person.src}}">

demo fiddle