Angular 6：来自资产的图像无法以内联样式工作

Question

我正在使用 Angular 6。

我必须从模板设置 div 的背景图片，为此，我正在做

<div class="full-page-background" [style.background-image]="'url(./assets/img/bg5.jpg)'">
</div>

但这给出 404 未找到。

我尝试了与 <img> 标签相同的路径

<img src="./assets/img/bg5.jpg" alt="">

并且工作正常。

1.为什么它不适用于样式元素？
2。如何设置div的背景图片?

Answer 1

应该是，

<div class="full-page-background" style="background-image: url('/assets/img/bg5.jpg'); "></div>

Answer 2

使用ngStyle指令

[ngStyle]="{'background-image':'url(./assets/img/bg5.jpg)'}">

Answer 3

使用 style.backround 而不是 style.background-image

<div class="full-page-background" [style.background]="'url(./assets/img/bg5.jpg)'">
</div>

或者我认为这也有效

<div class="full-page-background" [style.backgroundImage]="'url(./assets/img/bg5.jpg)'">
</div>

Answer 4

使用自定义 class bg:

在css中定义class bg:

.bg{

background-image: url('/../assets/img/bg5.jpg');

}