Heim >Web-Frontend >CSS-Tutorial >Wie verwende ich ngStyle, um Hintergrundbilder in Angular2 dynamisch festzulegen?

Wie verwende ich ngStyle, um Hintergrundbilder in Angular2 dynamisch festzulegen?

Barbara Streisand
Barbara StreisandOriginal
2024-11-01 20:52:29392Durchsuche

How to Use ngStyle to Dynamically Set Background Images in Angular2?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn