Frage angularjs ng-style: Hintergrundbild funktioniert nicht


Ich versuche, ein Hintergrundbild auf ein Div anzuwenden, indem ich das eckige benutze ng-style (Ich habe vorher eine benutzerdefinierte Direktive mit dem gleichen Verhalten versucht), aber es scheint nicht zu funktionieren.

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

Wenn ich jedoch eine Hintergrundfarbe versuche, scheint es gut zu funktionieren. Ich habe eine entfernte Quelle und eine lokale Quelle auch versucht http://lorempixel.com/g/400/200/sports/, hat nicht gearbeitet.


74
2018-06-22 15:54


Ursprung


Antworten:


Korrekte Syntax für background-image ist:

background-image: url("path_to_image");

Die korrekte Syntax für ng-style ist:

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

102
2018-06-22 17:02



Sie können Folgendes verwenden, um dynamische Werte zu analysieren:

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

oder so:

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

168
2017-10-28 19:00



Wenn Sie Daten haben, warten Sie auf die Rückkehr des Servers (item.id) und haben ein Konstrukt wie dieses:

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

Stellen Sie sicher, dass Sie etwas hinzufügen ng-if="item.id"

Andernfalls haben Sie entweder zwei oder eine fehlerhafte Anfrage.


15
2018-06-16 15:00



Für diejenigen, die kämpfen, um dies mit IE11 arbeiten

HTML

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

JS

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

10
2017-11-06 19:26



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

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

notification.icon ist hier die Scope-Variable.


1
2018-01-04 13:11



Wenn wir einen dynamischen Wert haben, der in einen css-Hintergrund gehen muss oder   Hintergrund-Bild-Attribut, kann es nur ein bisschen schwieriger zu sein   angeben.

Nehmen wir an, wir haben eine getImage () -Funktion in unserem Controller. Dies   Die Funktion gibt eine Zeichenfolge zurück, die wie folgt formatiert ist:   URL (Symbole / Stift.png). Wenn wir das tun, wird die ngStyle-Deklaration angegeben   genau wie zuvor:

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

Stellen Sie sicher, dass der Name des Hintergrundbildschlüssels in Anführungszeichen gesetzt wird.   Denken Sie daran, dass dies als gültiger Javascript-Objektschlüssel formatiert sein muss.


1
2018-06-13 09:27



Nur für die Datensätze können Sie auch Ihr Objekt im Controller wie folgt definieren:

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

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

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

Auf diese Weise können Sie Ihren Stil dynamisch ändern.


0
2017-08-13 21:29