Angular 2 Legen Sie CSS Hintergrund-Bild von Assets Ordner

Meine Ordnerstruktur sieht aus wieAngular 2 Legen Sie CSS Hintergrund-Bild von Assets Ordner

-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 meinem Haus-page.component.css, ich habe die

folgende

header { 
    width: 200px; 
    height: 200px; 
    background-image: url('/src/assets/home-page-img/header-bg.jpg'); 
} 

My angular-cli.json 
    "assets": [ 
    "assets", 
    "favicon.ico" 
]

Als ich das laufen Code, erhalte ich

GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)

zum Zweck demonstriert, Wenn ich Hintergrund-Bild der folgenden ändern, erhalte ich eine ganz andere erro r

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 Bild laden?

Quelle

2017-03-15 ErnieKev

prüfen, wo die Bilder in der dist-Ordner befinden. Du solltest niemals auf den src-Ordner zugreifen, er wird sowieso nicht in Produktions-Builds verfügbar sein. – sandrooco

Das würde Sinn machen. Wenn ich jedoch auf den Ordner "dist" verweise, würde dies zu einem Fehler führen, da der dist-Ordner nicht existiert, bis ich ng build --prod ausführe. – ErnieKev

Verwenden Sie den relativen Pfad mit Ref zu Ihrem CSS in Ihrem Bereich .. versuchen ../assets/home-page-img/header-bg.jpg. Das ist, was für mich in meinem ionischen 2 Projekt funktioniert. –

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

Quelle

2017-03-15 07:24:18 Thyagu

ich es verwenden. Immer beginnend 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">

Quelle

2018-02-20 17:27:50

Angular 2 Legen Sie CSS Hintergrund-Bild von Assets Ordner

Antwort

Verwandte Themen