Angular 2 - динамически устанавливаемый URL-адрес изображения
Путь к изображению определяется в item.imagePath.
<div *ngFor = "let item of itemList">
<div style = "background-image: url(item.imagePath)" class = "thumb">
<span>{{item.productName}}</span>
</div>
<div>
<p>{{item.productFeature}}</p>
</div>
</div>
style = "background-image: url(item.imagePath)"
Какой правильный синтаксис, если это не работает?
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
1
296
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Попробуй это
<div *ngFor = "let item of itemList">
<div class = "thumb">
<img src = "{{item.imagePath}}" />
<span>{{item.productName}}</span>
</div>
<div>
<p>{{item.productFeature}}</p>
</div>
</div>
похоже, что img src работает, если путь является абсолютным, item.imagePath, который у меня есть, является относительным, поэтому потребуется сгенерировать URL-адрес (background-image: url). Есть ли альтернатива?
—
23.07.2018 05:02
Ответ принят как подходящий
Стили обновляются в соответствии со значением оценки выражения:
ключи - это имена стилей с необязательным. суффикс (например, 'top.px', 'font-style.em'), значения - это значения, присвоенные этим свойствам (выраженные в заданных единицах измерения).
<div [ngStyle] = "{'background-image': 'url(' + photo + ')'}"></div>
Другие вопросы по теме
Совместное использование строк между классами файла TS одного и того же компонента в Angular2 для печати в шаблоне
Заполните данные в раскрывающемся списке из ответа GET json - Angular4
Angular присваивать объекты в подписке
Как получить значение поля ввода с тем же идентификатором в Angular4
TypeError: объект не поддерживает свойство или метод renderRows
Формы в AngularJS 6
Как вызвать метод из другого компонента без включения angular 6
ЛИНТЕР внезапно стал сверхстрогим после перехода на Angular 6
Угловые элементы DOM, которые не уничтожаются
ОШИБКА TypeError: невозможно прочитать свойство open of undefined
Похожие вопросы
CSS настраивает трапецию с перевернутым радиусом границы
Заполните данные в раскрывающемся списке из ответа GET json - Angular4
PHP - Как мне показать правильное выбранное значение <option>?
Удалить курс после клика
Изображение JavaScript заблокировано CORS
Xpath соответствует первому и последнему дочернему элементу
Как складывать числа в PHP, чтобы создать уникальный счет и сохранить его
Sed не заменяет HTML-теги
Изменить и добавить индекс для каждого объекта списка, возвращаемого контроллеру angular
Загрузка двух файлов в двух разных формах на одной странице
используйте нг-стиль Подробнее по ссылке ниже применить-CSS-стиль-атрибут-динамически-угловой-JS