I'm currently working on a movie search application where I need to set an image as the background of a div. The URL for this background image is fetched from an API call.
Here is what I have tried so far:
<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>
Upon trying the above code, I received a warning message:
WARNING: sanitizing unsafe style value background-image: url(https://image.tmdb.org/t/p/w500/fw02ONlDhrYjTSZV8XO6hhU3ds3.jpg)Unfortunately, the image did not display as expected.
Next, I attempted using this line of code in hopes of resolving the issue:
this.sanitizer.bypassSecurityTrustUrl(`
https://image.tmdb.org/t/p/w500"${this.movies.results[0].poster_path}
`);However, I still encountered the same problem.
I then experimented with the following code snippet:
background-image: [ngStyle]="{'background-image': 'url('+object.image+')'}"But despite my efforts, the image failed to load.
If anyone has any suggestions or solutions to help me overcome this challenge, I would greatly appreciate it!