Html 背景图片赢得'；动态加载

我正在尝试使用Angular 6动态设置div的背景图像。。。 但由于某种原因，无论我做什么，似乎我都无法使图像渲染。 使用python从本地SimpleHTTPServer提供图像

HTML:

我也试过使用消毒剂，但没有成功。。。我没有收到任何错误。

您可以这样使用：

<a *ngFor="let movie of movies">
    <div [ngStyle]="{'background-image': 'url(' + movie.image + ')'}"> {{movie.name}}</div>
</a>

<div [ngStyle]="{backgroundImage: 'url(' + movie.image + ')', width: '200px', height: '150px'}"></div>

更新： 您还应该在注释部分中提到div中的高度和宽度，如下所示：

<a *ngFor="let movie of movies">
    <div [ngStyle]="{'background-image': 'url(' + movie.image + ')'}"> {{movie.name}}</div>
</a>

<div [ngStyle]="{backgroundImage: 'url(' + movie.image + ')', width: '200px', height: '150px'}"></div>

---

确保url是URI编码的。

---

在JS:encodeURI（url）

@user3763577中，您需要确保

div

的样式也有一个高度和宽度，否则它看起来会工作吗？我猜问题在于当我使用谷歌的一些图片时，你准备的URL的

/img/

。。。但是，当我使用正在被服务的图像时，它不会work@user3763577好的，你能创建一个StackBlitz或者复制这个问题的东西吗？你看过这个代码了吗

<div [ngStyle]="{backgroundImage: 'url(' + movie.image + ')', width: '200px', height: '150px'}"></div>