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