web-dev-qa-db-fra.com

Images d'arrière-plan dynamique angulaire

Dans le modèle html, j'ai ce style avec une image dynamique:

<div style="background: url('/img/{{item.img}}'); width: 200px; height: 150px"></div>

Qui fonctionne dans les navigateurs Web et le navigateur Android. Toutefois, les images d'arrière-plan dynamiques utilisant "style =" ne s'affichent pas sur iPad. 

Je pouvais toujours créer des images dynamiques en utilisant le tag img mais je cherche une solution style/css pour iPad.

cssipadangularstyles
11
Pat M

Utilisez plutôt

<div [ngStyle]="{background: 'url(/img/' + item.img + ')', width: '200px', height: '150px'"></div>

ou

<div [style.background]="'url(/img/' + item.img + ')'"
    [style.width.px]="200" [style.height.px]="150p"></div>

Voir aussi Dans RC.1, certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison

54
Günter Zöchbauer

Vous devriez le faire, car la réponse de la deuxième partie + Günter Zöchbauer génère une position de fond supplémentaire non souhaitée pour le style: position initiale et taille de l'arrière-plan: initiale au moins sur Safari.

Notez que je ne définit que le style image de fond:

<div [style.background-image]="'url(/img/' + item.img + ')'"
 [style.width.px]="200" [style.height.px]="150p"></div>
8
Stéphane de Luca
<div id="component-id" [style.background-image]="'url(www.domain.com/path/'+bgImageVariable+')'">
    <!-- ... -->
</div>

ou

<div id="component-id" [style.background-image]="'url('+bgImageVariable+')'">
    <!-- ... -->
</div>

vous pouvez utiliser en second lieu en ajoutant le chemin de l'URL dans une seule variable . par exemple

bgImageVariable="www.domain.com/path/img.jpg";
2
Coder Girl

utilisez ceci et réglez la hauteur et la largeur de la balise div selon vos besoins

<div id="component-id" [style.backgroundImage]="'url('+bgImageVariable+')'"></div>
0
Manoj Rana