Hintergrund Standardbild, wenn ng-Stil Bild geladen ist ungültig url

Question

Ich füge Hintergrundbildern in meine div wie diese

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

wo myvariable.for.image eine URL wie/examplesite/image/id

Das funktioniert gut mit einer Ausnahme, wenn das Bild nicht da ist, tut es einfach nichts und mein Hintergrund sieht zu bla ... Wenn das Bild nicht existiert, möchte ich in der Lage sein, es durch ein Standardbild zu ersetzen.

Aber ich kann nicht scheinen, um herauszufinden, wie

Answer 1

Statt ngStyle ich eine benutzerdefinierte Richtlinie für diese verwenden würde. Wie das folgende. Dies überprüft, ob ein Attribut bereitgestellt wird, wenn es so versucht, das Bild zu laden. Wenn ein Bild geladen wird, legen wir das Hintergrundbild fest, ansonsten verwenden wir ein Standardbild.

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

wie folgt verwendet:

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

ein $ Timeout innerhalb dieser benutzerdefinierten Direktive für mich gearbeitet.

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

      } 
     } 
    } 
)