角度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

使用ngStyle指令

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

Answer 2

应该是，

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

Answer 3

使用style.backround而不是style.back-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>