Фоновые изображения не будут загружаться динамически

Question

Я пытаюсь установить фоновое изображение div динамически, используя Angular 6 ... Но по какой-то причине, независимо от того, что я делаю, кажется, я не могу сделать изображение для рендеринга.Изображения обслуживаются с локального сервера SimpleHTTPServer с использованием python.

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

Убедитесь, что URL-адрес URI-кодируется. В JS: encodeURI (url)

Answer 2

Вы можете использовать так:

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

или

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

Обновлен: Вы также должны упомянуть высоту и ширину в div, как указано user184994 в разделе комментариев следующим образом:

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