background default image if ng-style image loaded is invalid url

Question

I am adding background images to my div like this

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

where myv

Answer 1

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

Using a $timeout inside that custom directive worked for me.

.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
                );

            }
        }
    }
)

Answer 2

Instead of ngStyle I'd use a custom directive for this. Such as the following. This checks to see if an attribute is provided, if so it attempts to load that image. If it loads an image then we set the background image to it, otherwise we use a default image.

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+")");
                 };
             }
         });
      }
    };
});

Used like this:

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

demo fiddle