在html模板中,我有这种风格的动态图像:
<div style="background: url('/img/{{item.img}}'); width: 200px; height: 150px"></div>
哪个适用于Web浏览器和Android浏览器。但是,使用“style =”动态的背景图像不会在iPad上显示。
我总是可以使用img标签创建动态图像,但我正在寻找适用于iPad的样式/ CSS解决方案。
请改用
<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>
您应该这样做,因为+GünterZöchbauer第二部分答案会产生不需要的补充风格背景位置:初始和背景大小:至少在Safari上初始化。
请注意,我只设置了背景图像样式:
<div [style.background-image]="'url(/img/' + item.img + ')'"
[style.width.px]="200" [style.height.px]="150p"></div>
<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";
使用它并根据需要设置div标签的高度和宽度
<div id="component-id" [style.backgroundImage]="'url('+bgImageVariable+')'"></div>