角度动态背景图片

Posted 2023-02-22

【中文标题】角度动态背景图片

【英文标题】：Angular dynamic background images

【发布时间】：2016-10-01 05:13:05

【问题描述】：

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

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

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

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

【参考方案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

【讨论】：

此方法有效，直到您的图像名称包含方括号：some_image_(7).jpg

@wawka 可能是浏览器问题，而不是 Angular 问题bugzilla.mozilla.org/show_bug.cgi?id=478139。无论如何，谢谢你的信息。其他人也可能会遇到这种情况。

不。同样的问题也出现在 Chrome 上，这是有道理的。看看背景看起来像style="url(some_image_(7).jpg)"。我想你知道问题出在哪里了 :) 它导致括号过早关闭。

仍然不清楚为什么这应该与 Angular 相关。你试过纯 CSS 吗？你试过style="url('some_image_(7).jpg')"

这是一个问题，因为您没有绑定style="url('some_image_(7).jpg')"，而是绑定style="url(some_image_(7).jpg)"（请注意，url 内没有单引号）。

【参考方案2】：

您应该这样做，因为 +Günter Zöchbauer 第二部分的答案会生成不需要的补充样式 background-position: initial 和 background-size: initial 至少在 Safari 上。

注意我只设置了背景图片样式：

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

【参考方案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";

【参考方案4】：

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

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