Angular 2 Charger une image de fond CSS à partir du dossier assets

Question

Ma structure de dossier ressemble à

-myapp
    -assets
        -home-page-img
            -header-bg.jpg
    -src
        -app
        -home-page
            -home-page.component.css
            -home-page.component.html
            -home-page.component.ts

Dans mon home-page.component.css, j'ai les éléments suivants

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

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

Quand je lance le code, je reçois

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

Pour montrer le but, si je change l'image de fond comme suit, j'obtiens une erreur totalement différente

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'

Comment puis-je obtenir cette image à charger?

Answer 1

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

Answer 2

Je l'utilise. Commençant toujours par "/ assets /" en CSS et HTML "assets /". Et je n'ai pas de problèmes. Angular le reconnaît.

CSS

.descriptionModal{
    background-image: url("/assets/img/bg-compra.svg");
}

HTML

<img src="assets/img/ic-logoembajador-horizontal.svg" alt="logoEmbajador">

Answer 3

Essayez d'utiliser ceci ci-dessous: 

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