Switch Hintergrundbild - Angular 2

Ich habe eine Komponente mit diesem Styling: [ngStyle]="{background: 'url(http://somedomain/api/'+event.EventID+'/otherUrlItems/image) no-repeat center center'}" Die Komponenten haben auf dem Server und der erste ist als Hintergrundbild hinzugefügt. Wie sollte ich ein Standardhintergrundbild für die Komponenten hinzufügen, denen kein Bild zugeordnet ist?Switch Hintergrundbild - Angular 2

UPDATE: Das ist für mich gearbeitet:

[ngStyle]="{'background': 'url(http://somedomain/api/'+event.EventID+'/otherUrlItems/image) no-repeat center center, url(https://placeimg.com/640/480/any) no-repeat center center'}"

Quelle

2017-12-19 zlak

Mögliches Duplikat von [Combine \ [NgStyle \] With Condition (if..else)] (https://stackoverflow.com/questions/37051496/combine-ngstyle-with-condition-if-else) – Brian

Sie sind einfache Anführungszeichen sind fehl am Platz. –

@Brian, das hat mir geholfen: https://stackblitz.com/edit/angular-4kwerh. Danke für Pierre Mallet. – zlak

Wenn Ihre Anwendung wissen kann nicht, wenn es einen Hintergrund für dieses Ereignis ist, dass Sie mehrere Hintergrundbilder können versuchen, (stellen Sie Bild in letzter Standard)

see this post

eine andere Möglichkeit ist es, eine Klasse zu Ihrem DOM-Elemente hinzuzufügen und ein Hintergrundbild direkt im CSS festgelegt. Dann überschreibt der von ngStyle hinzugefügte Stil die CSS.

Aber der Nebeneffekt ist, dass Sie 404 Anfrage in Ihrem Client-Browser haben werden. Die beste Option ist IMO einen Standard-Hintergrund in Back-End-Host und dient es, wenn kein Bild vorhanden ist

Wenn Ihre Winkel Anwendung wissen, ob ein Bild verfügbar ist, dann im Kommentar die Post überprüft von Brian

Quelle

2017-12-19 14:56:54

Wissen Sie, ob ngStyle Hintergrund mit mehreren URLs unterstützt? – zlak

yep es Arbeit: https://stackblitz.com/edit/angular-4kwerh –

Es hat funktioniert. Danke vielmals. – zlak

Switch Hintergrundbild - Angular 2

Antwort

Verwandte Themen