angularjs ng-style: background-image не працює

Я намагаюся застосувати фонове зображення до div за допомогою кутового стилю ng-style (перед тим, як з такою ж поведінкою, намагався створити спеціальну директиву), але, здається, він не працює.


Хоча, якщо я спробую колір фону, він, здається, працює нормально. Я спробував віддалений джерело і локальне джерело теж http://lorempixel.com/g/400/200/sports/ , ні один з них не працював.

74

7 Відповіді

Можна проаналізувати динамічні значення в декілька способів.

Інтерполяція за допомогою фігурних дужок:

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

З'єднання рядків:

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

Літерали шаблонів ES6:

ng-style="{'background-image': `url(${myBackgroundUrl})`}"
171
додано
Це правильна відповідь.
додано Автор Nyxynyx, джерело
Насправді це найкраща відповідь (або, принаймні, моя проблема ...)
додано Автор standup75, джерело
Пам’ятайте, якщо ви використовуєте неправильний синтаксис (наприклад, вилучені одинарні лапки в url() ), браузер може відхилити значення і не встановити його.
додано Автор user3638471, джерело
Ваш варіант не працював для мене. але другий варіант DID працює. Дякую
додано Автор Joe Nabeezy, джерело
Крім того, ви можете написати вираз за допомогою фігурних дужок: data-ng-style = "{'background-image': 'url (img/products/{{produ & zwnj; код>
додано Автор mykola.rykov, джерело

Правильний синтаксис для background-image :

background-image: url("path_to_image");

Правильний синтаксис для ng-стилю:

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">
102
додано
чорт забирай ... Я забув url :) завдяки @ Stewie
додано Автор Roland, джерело
До речі, як мені зробити щось подібне: {{products.products [currenRoute] .desc}} ; в html?
додано Автор Roland, джерело
Щось подібне, але у мене вже є доступ до currenRoute . Це рядок, тому у мене є список продуктів: snippi.com/s/rznpfvo ; і мій currentRoute - це рядок, який відповідає одному з ідентифікаторів у списку продуктів. А оскільки я не можу зробити {{products.products.currenRoute.desc}} , я повинен знайти інший спосіб ...
додано Автор Roland, джерело
Я вважаю, що currentRoute - це ідентифікатор продукту з маршруту? Якщо це так, то служба route_Params, якщо ви введете його у свій контролер, зберігатиме посилання на ваш ідентифікатор ( $ scope.productId = $ routeParams.id ), оскільки ваш маршрут визначається як '/ products /: id'. Але ви можете відкрити нове питання для цього.
додано Автор Stewie, джерело
Використовуючи, наприклад, underscore.js у контролері: scope.products) .findWhere ({id: $ scope.currentRoute}) , а потім, на ваш погляд,: Але не давайте використовувати коментарі як чат. Розмістіть нове запитання.
додано Автор Stewie, джерело

Якщо у вас є дані, які ви чекаєте, щоб сервер повернувся (item.id), і у вас буде така конструкція:

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

Make sure you add something like ng-if="item.id"

Інакше у вас буде або два запити, або один несправний.

15
додано
Хороший пункт :) +1
додано Автор Roland, джерело

Для тих, хто намагається отримати цю роботу з IE11

HTML

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

JS

$scope.getBackgroundStyle = function(imagepath){
    return {
        'background-image':'url(' + imagepath + ')'
    }
}
10
додано
Єдине, що працювало і в хромі (ubuntu), всі інші приклади або "офіційний шлях", здається, ігноруються. Стиль змінюється, але не впливає.
додано Автор davidkonrad, джерело
Ви тільки що врятували моє життя прямо зараз спасибі .. Я витратив години намагаються з'ясувати чому мій ng-стиль не показував у IE 11. Я досі не розумію чому але це попрацювало!
додано Автор w3bMak3r, джерело

Це працювало для мене, фігурні дужки не потрібні.

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

notification.icon тут є змінною області.

1
додано

Якщо ми маємо динамічне значення, яке потрібно перейти на фон CSS або   background-image атрибут, це може бути трохи більш складно   вкажіть.

     

Припустимо, що у нашому контролері функція getImage (). Це   Функція повертає рядок, форматований подібно до цього:   url (icons/pen.png). Якщо ми це зробимо, декларація ngStyle вказана   точно так само, як і раніше:

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

Переконайтеся, що ви наведете лапки навколо імені ключа фону.   Пам'ятайте, що це має бути відформатовано як дійсний ключ об'єкта Javascript.

1
додано
Що джерело цитування?
додано Автор Manas, джерело

Для записів ви також можете визначити об'єкт у контролері так:

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

а потім можна визначити функцію для зміни властивості об'єкта безпосередньо:

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

Роблячи це таким чином, ви можете модифікувати свій стиль.

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram