Question

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

HTML：

<a *ngFor="let movie of movies">
    <div [style.background-image]="movie.image">
        {{movie.name}}
    </div>
</a>

组件：

getMovies() : void {
    this.movieService.getMovies().subscribe(movies => this.movies = movies.map(movie => {
        movie.image = this.sanitizer.bypassSecurityTrustStyle(`url(${movie.image})`);
        return movie;
    }));
}

我也尝试过使用消毒剂，但没有成功...而且我没有出现任何错误。

Answer 1

您可以这样使用：

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

或

 [style.backgroundImage]="'url('+ movie.image +')'"

已更新：您还应该像在评论部分中user184994所提到的那样在div中提到高度和宽度，如下所示：

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

Answer 2

确保该URL是URI编码的。在JS中：encodeURI（url）

背景图片不会动态加载

2 个答案: