以 HTML 样式添加时，Angular 不会加载背景图像答案

【问题标题】：Angular won't load background image when added in HTML Style以 HTML 样式添加时，Angular 不会加载背景图像
【发布时间】：2017-09-11 23:29:44
【问题描述】：

我有这个图像路径<div>{{image}}</div>，它给出：

<div>http://my_ip/images/file.jpg</div>

但是当我在我的 HTML 中添加它作为样式背景时，它不会加载！

<div style="background-image: url('{{image}}')"></div>

给予

<div style></div>

知道这里发生了什么吗？为什么 Angular 不将图像渲染为背景图像？

编辑：我使用的是 Angular 4。

【问题讨论】：

ng-style="{'background-image':'url('+image+')'}"
ng-style 不再在 AngularJS 4 中工作。我已经尝试过了，但它不起作用：style="{'background-image':'url({{image}}.jpg)'}"
用+image+ 代替大括号是什么？我试过了，但它不会渲染。
你在使用 AngularJS 对吗？版本控制 (
我正在使用 Angular 4。

【解决方案1】：

使用此指令绑定语法

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

其中背景 url 是指向您的 url 地址的链接。这记录在这里 https://angular.io/api/common/NgStyle

【讨论】：

【解决方案2】：

如果您使用的是 Angular4，有几种方法可以实现内联 CSS。最简单的一种是从 common 包中导入和使用 ngStyle [ngStyle]（旧的 AngularJS 语法是 ng-style）指令。

另一种方法是直接使用[style.{attribute}] 对组件进行属性绑定，在您的情况下为：[style.backgroundImage]。

文档可以在这里找到：

【讨论】：