Prior to formulating this query, I thoroughly reviewed all preexisting questions and unfortunately, none of the responses addressed my specific issue.
Currently, I am retrieving data from an API,
{{ album.image["3"]["#text"] }}<div class="album-grid">
<div *ngFor="let album of albums">
<div class="album"> <--! My goal here is to set a backgroundImage for each album -->
<h4>{{ album.name }},</h4>
<h5>by {{ album.artist.name }}</h5>
<p>{{ album.image["3"]["#text"] }}</p> <--! This is the link to the .png file fetched from the server -->
</div>
</div>
</div>
I have attempted various solutions but unfortunately, none of them provided a resolution:
[style.backgroundImage]="album.image['3']['#text']"
[style]="backgroundImage: {{album.image['3']['#text']}"
[ngStyle]="{ 'backgroundImage': album.image['3']['#text'] }"
Repository Link -> https://github.com/paslavskyi9roman/Spotilar
In the image below, you can observe a grid displaying various albums, showcasing the album name, artist name, and the link to the album cover file which needs to be utilized as a background image click here