Question

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

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

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

的网址

这样可以正常工作，但有一个例外，如果图像不存在，它就不会做任何事情而且我的背景看起来太过分了......如果图像不存在，我希望能够用默认图像替换它。

但我似乎无法弄清楚如何

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

Answer 2

<div err-bg-src='{{default_business_logo_wd}}' ng-style="{'background-image' : 'url('+ifNull(place.logo_wd,default_business_logo_wd)+')'}" id="perfilEstablecimiento-container10" class="place-header">
    <div id="perfilEstablecimiento-container13" class="place-title-container">
        <h4 id="perfilEstablecimiento-heading1" class="place-title">{{place.name}}</h4>
    </div>
</div>

在该自定义指令中使用$ timeout为我工作。

.directive
(
    'errBgSrc',
    function($timeout)
    {
        return {
            link: function(scope, element, attrs) 
            {
                $timeout
                (
                    function()
                    {
                        if(window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage=='none'||window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage==null)
                        {
                            document.getElementById(attrs.id).style.backgroundImage='url('+attrs.errBgSrc+')';
                        }
                        else
                        {
                            var image = new Image();
                            var style=window.getComputedStyle(document.getElementById(attrs.id)).backgroundImage;
                            var url=style.slice(5,style.length-2);
                            image.src = url;

                            image.onerror = function()
                            {
                                document.getElementById(attrs.id).style.backgroundImage='url('+attrs.errBgSrc+')';
                            };
                        }
                    },
                    500
                );

            }
        }
    }
)

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

2 个答案: