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

【问题标题】：background default image if ng-style image loaded is invalid url如果加载的 ng 样式图像是无效的 url，则背景默认图像
【发布时间】：2014-01-30 03:46:13
【问题描述】：

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

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

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

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

但我似乎无法弄清楚如何

【问题讨论】：

当图像不存在时，变量是否仍然包含路径或者值未定义/空？
如果图像不存在它仍然有路径

标签： angularjs angularjs-scope angularjs-ng-repeat angular-ui

【解决方案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

【讨论】：

试试我刚刚添加的更新版本 - 上一个有时间问题
感谢您的回复。我试过了。出于某种原因，它总是转到这部分代码 if (!attr.bgImage) { console.log("no attribute at all"); element.css("背景图片","url("+scope.defaultImage+")"); } 不知道为什么...
我更新了指令以观察属性的变化，以防指令第一次链接时您的变量没有加载图像。看看这是否适合你。如果没有，您能否发布使用该指令的元素？
尝试将 css 更新过程封装到 $timeout 块中（不需要延迟）。这在 ionic 中对我有用。

【解决方案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
                );

            }
        }
    }
)

【讨论】：