Angular：如何通过 HTML 而不是 CSS 传递背景图像 URL？答案

【问题标题】：Angular: How can I pass a background image URL through HTML rather than CSS?Angular：如何通过 HTML 而不是 CSS 传递背景图像 URL？
【发布时间】：2019-12-18 16:09:26
【问题描述】：

情景：

我的 Angular 应用程序中有一个要添加背景图像的元素。目前我有这个：

<div class={{background-class}}></div>

其中background-class 是例如“background-style-1”，在我的样式表中是这样的：

background-style-1 {
  background-image: url(../../../../assets/images/contextmenu/person.png);
}

该元素成功显示图像，如果我查询它，它会显示：

问题：

我不想将所有背景图像 URL 硬编码到我的样式表中。相反，我只想将 URL 传递到 HTML 标记中。

我的尝试

<div style="background-image: url(../../../../assets/images/contextmenu/person.png)"></div>

这无法显示图像，当我查询元素时，它显示：

我想知道的：

为什么将图像 URL 作为内联样式属性传递不起作用，如何使其起作用？

【问题讨论】：

标签： html css angular

【解决方案1】：

您可以使用以下语法从 html 动态设置背景图像：[style.someproperty]="'somevalue'"。在您的情况下，它可能看起来像这样。

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

这会将url（在您的控制器中定义）的值作为背景图片的网址。

【讨论】：

嗨 Nicholas，不幸的是它仍然无法正常工作。图像未加载，当我将鼠标悬停在元素上时，它显示： background-image: url(../../../../assets/images/contextmenu/person.png);是否有任何其他信息可以帮助您诊断问题？
你确定图片../../../../assets/images/contextmenu/person.png存在吗？
是的，仔细检查了;)
我不确定，但这可能与 Angular 捆绑文件的方式有关。请记住，当您加载站点时，您正在从dist 文件夹加载编译文件。因此，如果您的dist 文件夹中没有您的图像，则浏览器无法使用它。
如果一切都在~/projects/somefolders/yourapp/dist/ 中，那么../../../../ 会一直返回到project 文件夹（在本例中）@RNdev

【解决方案2】：

你可以使用ngStyle:

HTML：

[ngStyle]="{'background-image': 'url(' + image + ')'}"

TS：

image = "assets/images/contextmenu/person.png"

【讨论】：

嗨阿德里塔，不幸的是它仍然无法正常工作。图像未加载，当我将鼠标悬停在元素上时，它显示： background-image: url(../../../../assets/images/contextmenu/person.png);是否有任何其他信息可以帮助您诊断问题？
你确定图片路径正确吗？只需绑定图片src即可测试

【解决方案3】：

您可以使用ngStyle 指令在html元素上动态绑定样式

在组件中设置你的路径变量

path = '../../../../assets/images/contextmenu/person.png'

在下面的模板中使用它

<div [ngStyle]="{'background-image': 'url(' + path + ')'}"></div>

试试这个

https://stackblitz.com/edit/angular-cxk5dr

ngStyle 的文档链接

https://angular.io/api/common/NgStyle

【讨论】：

嗨，Mamta，不幸的是，它仍然无法正常工作。图像未加载，当我将鼠标悬停在元素上时，它显示： background-image: url(../../../../assets/images/contextmenu/person.png);是否有任何其他信息可以帮助您诊断问题？
能否请您提供包含您的一些示例代码的 stackblitz 链接
我认为您不能将图像上传到 stackblitz。我的代码与您在 stackblitz 链接中的代码完全相同，只是我没有使用“https ...”作为 URL，而是使用本地文件的引用。您知道是否可以将图像上传到 stackblitz 以复制我的场景？我不认为我可以。

【解决方案4】：

您可以使用[ngStyle] 或[style.backgroundImage] 来绑定动态样式。

最好将图像/图标名称传递给组件。

[ngStyle]="{'background-image': 'url(path/to/icons' + iconName + ')'}"

或类似

[style.backgroundImage]= 'url(path/to/icons' + iconName + ')'

iconName 是

const iconName = 'logo.svg';

PS：确保logo.svg 存在于给定路径中。

【讨论】：