javascript - how - ng-style background image

angularjs ng-style: background-image no funciona

Question

Estoy intentando aplicar una imagen de fondo a un div usando el ng-style angular (intenté 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. Probé una fuente remota y también una fuente local http://lorempixel.com/g/400/200/sports/ , ninguna de las dos funcionó.

Answer 1

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

Digamos que tenemos una función getImage () en nuestro controlador. Esta función devuelve una cadena con el mismo formato: url (icons / pen.png). Si lo hacemos, la declaración ngStyle se especifica 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.

Answer 2

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.

Answer 3

La sintaxis correcta 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)''}">

Answer 4

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 + '')''
    }
}

Answer 5

Puede usar lo siguiente para analizar valores dinámicos:

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

o así:

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

Answer 6

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úrese de agregar algo como ng-if="item.id"

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

Answer 7

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.