Mi estructura de carpetas se parece a
-myapp -assets -home-page-img -header-bg.jpg -src -app -home-page -home-page.component.css -home-page.component.html -home-page.component.tsDentro de mi home-page.component.css, tengo lo siguiente
header { width: 200px; height: 200px; background-image: url('/src/assets/home-page-img/header-bg.jpg'); } My angular-cli.json "assets": [ "assets", "favicon.ico" ]Cuando ejecuto el código, obtengo
GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)Para fines de demostración, si cambio la imagen de fondo a la siguiente, obtengo un error completamente diferente
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'¿Cómo puedo hacer para que cargue esa imagen?
Lo uso. Siempre comenzando con "/assets/" en CSS y HTML "assets/". Y no tengo problemas. Angular lo reconoce.
CSS
.descriptionModal{ background-image: url("/assets/img/bg-compra.svg"); }HTML
<img src="assets/img/ic-logoembajador-horizontal.svg" alt="logoEmbajador">probar
background-image: url('../../assets/home-page-img/header-bg.jpg');Para background-image: url(/assets/images/foo.png) , tengo otro problema con i18n + base-href, finalmente encontré una solución alternativa .
Mi problema fue resuelto por:
background-image: url(~src/assets/images/foo.png) .
etiqueta de imagen:
<img src="assets/images/foo.jpg" />