Angular 2 Lädt das CSS-Hintergrundbild aus dem Ordner Assets
Meine Ordnerstruktur sieht so aus
-myapp
-assets
-home-page-img
-header-bg.jpg
-src
-app
-home-page
-home-page.component.css
-home-page.component.html
-home-page.component.ts
In meiner Startseite.component.css habe ich Folgendes
header {
width: 200px;
height: 200px;
background-image: url('/src/assets/home-page-img/header-bg.jpg');
}
My angular-cli.json
"assets": [
"assets",
"favicon.ico"
]
Wenn ich den Code laufen lasse, bekomme ich
GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)
Zu Demonstrationszwecken erhalte ich einen völlig anderen Fehler, wenn ich das Hintergrundbild auf Folgendes umstelle
background-image: url('assets/home-page-img/header-bg.jpg');
./src/app/home-page/home-page.component.css
Module not found: Error: Can't resolve './assets/home-page-img/header-bg.jpg' in '/Users/JohnSmith/Desktop/my-app/src/app/home-page'
Wie kann ich das Image laden?
versuche background-image: url('../../assets/home-page-img/header-bg.jpg');
Ich benutze es. Beginnt immer mit "/ assets /" in CSS und HTML "assets /". Und ich habe keine Probleme. Angular erkennt es.
CSS
.descriptionModal{
background-image: url("/assets/img/bg-compra.svg");
}
HTML
<img src="assets/img/ic-logoembajador-horizontal.svg" alt="logoEmbajador">
Für background-image: url(/assets/images/foo.png) habe ich ein weiteres Problem mit i18n + base-href, schließlich habe ich eine Workaround-Lösung gefunden.
Mein Problem wurde gelöst durch:
background-image: url(~src/assets/images/foo.png).
bild-Tag:
<img src="assets/images/foo.jpg" />
Versuchen Sie, dies unten zu verwenden:
background-image: url('./../assets/home-page-img/header-bg.jpg');