CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeatangular-ui
Asim Zaidi
Asim Zaidi

Reputation: 28304

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

I am adding background images to my div like this

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

where myvariable.for.image is a url like /examplesite/image/id

This works fine with one exception, if the image is not there it just doesnt do anything and my background looks too bla...If the image doesnt exist I want to be able to replace it with a default image.

But I cant seem to figure out how

Upvotes: 5

Views: 3738

Answers (2)

Christian Læirbag
Christian Læirbag

Reputation: 338

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

            }
        }
    }
)

Upvotes: 0

KayakDave
KayakDave

Reputation: 24676

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

Upvotes: 9

Related Questions