角度动态背景图像

Question

在 html 模板中，我有这种带有动态图像的样式：

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

这适用于网络浏览器和安卓浏览器。但是，使用"style="动态的背景图像不会显示在iPad上。

我总是可以使用 img 标签创建动态图像，但我正在寻找适用于 iPad 的样式/css 解决方案。

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>

参见 在 RC.1 中，某些样式无法使用绑定语法添加

Answer 2

你应该这样做，因为+Günter Zöchbauer第二部分答案会生成不需要的补充样式背景位置：初始和背景大小：至少在Safari上是初始的。

请注意，我只设置背景图像样式：

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

Answer 3

<div id="component-id" [style.background-image]="'url(www.domain.com/path/'+bgImageVariable+')'">
    <!-- ... -->
</div>

或

<div id="component-id" [style.background-image]="'url('+bgImageVariable+')'">
    <!-- ... -->
</div>

您可以通过在单个变量中添加 URL 路径来以第二种方式使用。例如

bgImageVariable="www.domain.com/path/img.jpg";

Answer 4

使用它并根据需要设置div标签的高度和宽度

<div id="component-id" [style.backgroundImage]="'url('+bgImageVariable+')'"></div>