Pregunta angularjs ng-style: background-image no funciona


Estoy tratando de aplicar una imagen de fondo a un div usando el angular ng-style (Probé una directiva personalizada antes con el mismo comportamiento), pero parece que no funciona.

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

Sin embargo, si pruebo un color de fondo, parece estar funcionando bien. Intenté una fuente remota y una fuente local también http://lorempixel.com/g/400/200/sports/, ninguno funcionó.


74
2018-06-22 15:54


origen


Respuestas:


Corregir la sintaxis para background-image es:

background-image: url("path_to_image");

La sintaxis correcta para ng-style es:

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

102
2018-06-22 17:02



Puede usar lo siguiente para analizar valores dinámicos:

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

o así:

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

168
2017-10-28 19:00



SI tiene datos, está esperando que el servidor regrese (ítem.id) y tenga una construcción como esta:

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

Asegúrate de agregar algo como ng-if="item.id"

De lo contrario, tendrá dos solicitudes o una incorrecta.


15
2018-06-16 15:00



Para aquellos que están luchando para que esto funcione con IE11

HTML

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

JS

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

10
2017-11-06 19:26



Esto funcionó para mí, las llaves no son necesarias.

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

notification.icon aquí es la variable de alcance.


1
2018-01-04 13:11



Si tenemos un valor dinámico que debe ir en un fondo CSS o   atributo de imagen de fondo, puede ser un poco más complicado   especificar.

Digamos que tenemos una función getImage () en nuestro controlador. Esta   función devuelve una cadena con el formato similar a esto:   url (icons / pen.png). Si lo hacemos, se especifica la declaración ngStyle   exactamente de la misma manera que antes:

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

Asegúrese de poner comillas alrededor del nombre de la clave de la imagen de fondo.   Recuerde, esto debe ser formateado como una clave de objeto Javascript válida.


1
2018-06-13 09:27



Solo para los registros, también puedes definir tu objeto en el controlador de esta manera:

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

y luego puede definir una función para cambiar la propiedad del objeto directamente:

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

Haciéndolo de esa manera usted puede modificar su estilo dinámicamente.


0
2017-08-13 21:29