Angular2 динамический фоновые изображения

Question

В шаблоне HTML У меня есть этот стиль с динамическим изображением:

<div style="background: url('/img/{{item.img}}'); width: 200px; height: 150px"></div> 

который работает в веб-браузерах и андроида браузере. Однако фоновые изображения, которые являются динамическими с помощью «style =», не отображаются на iPad.

Я всегда мог создавать динамические изображения с помощью тега img, но я ищу решение стиля/css для iPad.

Answer 1

Используйте вместо

<div [ngStyle]="{background: 'url(/img/' + item.img + ')', width: '200px', height: '150px'"></div> 

или

<div [style.background]="'url(/img/' + item.img + ')'" 
    [style.width.px]="200" [style.height.px]="150p"></div> 

Смотрите также In RC.1 some styles can't be added using binding syntax

Answer 2

Вы должны сделать это как вторая часть ответа + Гюнтер Zöchbauer создает нежелательный дополнительный стиль фон положение: начальное и background-size: начальная настройка Safari.

Обратите внимание, что я только установить стиль фона изображения:

<div [style.background-image]="'url(/img/' + item.img + ')'" 
[style.width.px]="200" [style.height.px]="150p"></div>