À ce stade, j'obtiens une image à partir d'une API et je l'imprime dans la vue avec interpolation:

<img src="{{url + '/get-product-image/' + product.image}}" *ngIf="product.image" class="img"/>

Ma question est la suivante: il est possible d'interpoler à partir de [style.background] ou quelque chose comme ça ?.
Mon css:

#banner{
    background: linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)),
    url('https://images.unsplash.com/photo-1460306855393-0410f61241c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80');
}

Mon objectif est d'interpoler l'image de fond d'un élément html:

<section id="banner">
<section [style.backgroundImage]="{{url + '/get-product-image/' + product.image}}"></section>

Merci d'avance

0
sonEtLumiere 25 sept. 2020 à 08:09

2 réponses

Meilleure réponse

Vous pouvez y parvenir en utilisant ci-dessous:

<div style="height:300px;width:300px;" [ngStyle]="{'background': 'url(' + imgURL + ') no-repeat 0 0 / cover'}" class="flex-center">
</div>

Voici le lien stackBlitz: demo

1
programoholic 25 sept. 2020 à 05:48

La syntaxe d'Ur est fausse. Cela devrait fonctionner lorsque vous utilisez "style.backgroundImage" comme ceci:

<section [style.backgroundImage]="'url(' + URL_OF_IMAGE + ')'"></section>
1
Kerschbaumer Stefan 25 sept. 2020 à 05:46