Использование значения вызова API в качестве фонового изображения для div в моем приложении Angular - PullRequest
Новая
       36

Использование значения вызова API в качестве фонового изображения для div в моем приложении Angular

0 голосов
/ 05 апреля 2019

Я создаю приложение для поиска фильмов, и мне нужно использовать изображение в качестве фона для div. Я получаю URL для фонового изображения из вызова API.

Я пробовал это 

<div *ngFor="let movie of movies.results">
  <div
    class="thumbnail" style="background-image: 
    url(https://image.tmdb.org/t/p/w500{{movie.poster_path}})"
  >
    -- id: {{ movie.id }} -- name: {{ movie.title }}
  </div>
</div>

это предупреждение я получаю

WARNING: sanitizing unsafe style value background-image: url(https://image.tmdb.org/t/p/w500/fw02ONlDhrYjTSZV8XO6hhU3ds3.jpg)

и изображение не отображается.

Затем я пробую это на одном из значений, чтобы увидеть, будет ли оно работать

this.sanitizer.bypassSecurityTrustUrl(` https://image.tmdb.org/t/p/w500"${this.movies.results[0].poster_path} `);

но я все еще сталкиваюсь с той же проблемой ??

Я тогда попробовал это

background-image: [ngStyle]="{'background-image': 'url('+object.image+')'}"

Все еще не повезло.

Кто-нибудь знает, как я могу решить эту проблему? ## Заголовок ##

1 Ответ

1 голос
/ 05 апреля 2019

Похоже, вы были действительно близки с использованием DomSanitizer и bypassSecurityTrustUrl. Я считаю, что использование того же подхода, но использование bypassSecurityTrustStyle должно решить проблему для вас. 

<div *ngFor="let movie of movies.results">
  <div
    class="thumbnail" [style.background-image]="getSafeStyle(movie.poster_path)"
  >
    -- id: {{ movie.id }} -- name: {{ movie.title }}
  </div>
</div>

getSafeStyle(url: string) {
  return this.sanitizer.bypassSecurityTrustStyle('url(\'' + url + '\')');
}
...