如果ng样式图像加载的URL无效,则为背景默认图像

Question

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

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

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

这样可以正常工作,但有一个例外,如果图像不在那里它只是没有做任何事情而我的背景看起来太过bla ...如果图像不存在我希望能够用默认图像替换它.

但我似乎无法弄清楚如何

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}}">

演示小提琴