Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-11-01 20:52:29
Original
292 Leute haben es durchsucht

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>
Nach dem Login kopieren
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!