web-dev-qa-db-fra.com

angularjs ng-style: l'image d'arrière-plan ne fonctionne pas

J'essaye d'appliquer une image de fond à une div en utilisant le angular ng-style (J'ai déjà essayé une directive personnalisée avec le même comportement), mais cela ne semble pas fonctionner.

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

Cependant, si j'essaie d'utiliser une couleur de fond, elle semble bien fonctionner. J'ai aussi essayé une source distante et une source locale http://lorempixel.com/g/400/200/sports/, ni travaillé.

javascriptangularjsangularjs-directiveangularjs-ng-repeatng-style
76
Roland

Corriger la syntaxe pour background-image est:

background-image: url("path_to_image");

La syntaxe correcte pour ng-style est la suivante:

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

Il est possible d'analyser les valeurs dynamiques de deux manières.

Interpolation avec des doubles accolades:

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

Concaténation de chaînes:

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

Littéraux de modèle ES6:

ng-style="{'background-image': `url(${myBackgroundUrl})`}"
182
sqren

SI vous avez des données, vous attendez que le serveur retourne (item.id) et que votre construction ressemble à ceci:

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

Assurez-vous d'ajouter quelque chose comme ng-if="item.id"

Sinon, vous aurez soit deux demandes, soit une défectueuse.

15
flaky

Pour ceux qui ont du mal à faire fonctionner cela avec IE11

HTML 

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

JS 

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

Si nous avons une valeur dynamique qui doit aller dans un attribut css background ou background-image, cela peut être un peu plus délicat à spécifier.

Disons que nous avons une fonction getImage () dans notre contrôleur. Cette fonction retourne une chaîne au format similaire à celui-ci: url (icons/pen.png). Si nous le faisons, la déclaration ngStyle est spécifiée exactement de la même manière que précédemment:

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

Assurez-vous de mettre des guillemets autour du nom de la clé background-image. Rappelez-vous que ceci doit être formaté comme une clé d'objet Javascript valide.

1
Mohammed Amine

Cela a fonctionné pour moi, les accolades ne sont pas nécessaires.

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

notification.icon ici est une variable de portée.

1
mkkhedawat

Juste pour les enregistrements, vous pouvez également définir votre objet dans le contrôleur comme ceci:

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

et ensuite vous pouvez définir une fonction pour changer directement la propriété de l'objet:

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

En le faisant de cette manière, vous pouvez modifier votre style de façon dinamique.

0
Ezequiel

La syntaxe est modifiée pour Angular:

[ngStyle]="{'background-image': 'url(path)'}"
0
Maihan Nijat