wake-up-neo.com

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?

13
ErnieKev

versuche background-image: url('../../assets/home-page-img/header-bg.jpg'); 

29
Thyagu

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">
16
Samuel Ivan

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" />
3
Hieu Tran AGI

Versuchen Sie, dies unten zu verwenden: 

background-image: url('./../assets/home-page-img/header-bg.jpg');