Heim >Web-Frontend >CSS-Tutorial >Wie verwende ich ngStyle, um Hintergrundbilder in Angular2 dynamisch festzulegen?
Verwenden von ngStyle zum Festlegen eines Hintergrundbilds in Angular2
In Angular2 können Sie mit der ngStyle-Direktive CSS-Stile dynamisch zu einem Element hinzufügen zu JavaScript-Ausdrücken. Um mit ngStyle ein Hintergrundbild festzulegen, können Sie die folgende Syntax verwenden:
<code class="html"><div [ngStyle]="{'background-image': 'url(' + photo + ')'}"></div></code>
In Ihrem Code scheinen Sie die einfachen Anführungszeichen um die URL übersehen zu haben:
<code class="html"><div [ngStyle]="{'background-image': url(' + photo + ')}"></div></code>
An Um dies zu beheben, fügen Sie einfach die fehlenden Anführungszeichen hinzu:
<code class="html"><div [ngStyle]="{'background-image': 'url(' + photo + ')'}"></div></code>
Mit dieser Änderung wendet die ngStyle-Direktive die bereitgestellte URL korrekt als Hintergrundbild für das div-Element an.
Das obige ist der detaillierte Inhalt vonWie verwende ich ngStyle, um Hintergrundbilder in Angular2 dynamisch festzulegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!