angularjs ng-style: Hintergrundbild funktioniert nicht

Question

Ich versuche, ein Hintergrundbild auf ein div mit dem Winkel ng-style (Ich versuchte eine benutzerdefinierte Anweisung zuvor mit dem gleichen Verhalten), aber es tut nicht scheinen zu arbeiten.

<nav 
    class="navigation-grid-container" 
    data-ng-class="{ bigger: isNavActive == true }" 
    data-ng-controller="NavigationCtrl" 
    data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true" 
    data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false" 
    data-ng-show="$parent.navInvisible == false" 
    data-ng-animate="'fade'" 
    ng-cloak> 

    <ul class="navigation-container unstyled clearfix"> 
     <li 
      class="navigation-item-container" 
      data-ng-repeat="(key, item) in navigation" 
      data-ng-class="{ small: $parent.isNavActive, big: isActive == true }" 
      data-ng-mouseenter="isActive = true; isInactive= false" 
      data-ng-mouseleave="isActive = false; isInactive= true"> 

      <div data-ng-switch on="item.id"> 

       <div class="navigation-item-default" data-ng-switch-when="scandinavia"> 
        <a class="navigation-item-overlay" data-ng-href="{{item.id}}"> 
         <div class="navigation-item-teaser"> 
          <span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }">{{item.teaser}}</span> 
         </div> 
        </a> 
        <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span> 
       </div> 

       <div class="navigation-item-last" data-ng-switch-when="static"> 
        <div class="navigation-item-overlay"> 
         <div class="navigation-item-teaser"> 
          <span class="navigation-item-teaser-text"> 
           <img data-ng-src="{{item.teaser}}"> 
          </span> 
         </div> 
        </div> 
        <span class="navigation-item-background"> 
         <img class="logo" data-ng-src="{{item.images.logo}}"> 
        </span> 
       </div> 

       <div class="navigation-item-default" data-ng-switch-default> 
        <a class="navigation-item-overlay" data-ng-href="{{item.id}}"> 
         <div class="navigation-item-teaser"> 
          <span class="navigation-item-teaser-text">{{item.teaser}}</span> 
         </div> 
        </a> 
        <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span> 
       </div> 

      </div> 
     </li> 
    </ul> 
</nav> 

Obwohl, wenn ich eine Hintergrundfarbe versuche, scheint es gut zu funktionieren. Ich habe versucht, eine Remote-Quelle und eine lokale Quelle zu http://lorempixel.com/g/400/200/sports/, keiner funktioniert.

Answer 1

korrekte Syntax für background-image ist:

background-image: url("path_to_image"); 

korrekte Syntax für ng-Stil ist:

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}"> 

Answer 2

Sie die folgenden Befehle verwenden können dynamische Werte analysieren:

ng-style="{'background-image':'url({{myBackgroundUrl}})'}" 

oder so:

ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}" 

Answer 3

Wenn Sie Daten haben Sie warten auf den Server zurück (item.id) und haben ein Konstrukt wie folgt aus:

ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}" 

Stellen Sie sicher, so etwas wie ng-if="item.id"

Andernfalls fügen Sie Ich habe entweder zwei oder eine Anfrage.

Answer 4

Für diejenigen, die mit IE11 diese Funktion erhalten kämpfen

HTML

<div ng-style="getBackgroundStyle(imagepath)"></div> 

JS

$scope.getBackgroundStyle = function(imagepath){ 
    return { 
     'background-image':'url(' + imagepath + ')' 
    } 
} 

Answer 5

nur für die Datensätze können Sie auch Ihr Objekt definieren in der Controller so:

this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' }; 

und dann können Sie eine Funktion definieren, die Eigenschaft des Objekts zu ändern direkt:

this.changeBackgroundImage = function(){ 
     this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')'; 
    } 

es auf diese Weise tun Sie dinamicaly Stil ändern können.

Answer 6

Dies funktionierte für mich, geschweifte Klammern sind nicht erforderlich.

ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}" 

notification.icon hier ist Scope-Variable.

Answer 7

Wenn wir einen dynamischen Wert haben, der in einem CSS-Hintergrund oder Attribut background-image gehen muss, kann es nur ein wenig komplizierter zu angeben sein.

Nehmen wir an, wir haben eine getImage() Funktion in unserem Controller.Diese Funktion gibt eine Zeichenfolge zurück, die wie folgt formatiert ist: URL (icons/pen.png). Wenn wir das tun, wird die ngstyle Erklärung der genau die gleiche Art und Weise angegeben wie zuvor:

ng-style="{ 'background-image': getImage() }" 

---

Stellen Sie sicher, Anführungszeichen um den Hintergrund-Bild Schlüsselnamen zu setzen. Denken Sie daran, dass dies als gültiger Javascript-Objektschlüssel formatiert sein muss.