Angular 2 Load CSS background-image from assets folder

Question

My folder structure looks like

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

Inside my home-page.component.css, I have the following

header {     width: 200px;     height: 200px;     background-image: url('/src/assets/home-page-img/header-bg.jpg'); }  My angular-cli.json     "assets": [     "assets",     "favicon.ico" ] 

When I run the code, I get

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

For demonstrating purpose, If I change background-image to the following, I get a whole different error

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' 

How can I get that image to load?

Answer 1

I use it. Always starting with "/assets/" in CSS and HTML "assets/". And I have no problems. Angular recognizes it.

CSS

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

HTML

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

Answer 2

try

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