I am working on angular app and I have generated project structure with angular-cli. I am using below css in on of my component :
.profilePic{ height:67px; width: 67px; display: block; background: url('/assets/images/header-profile-pic.png') no-repeat center center } 
When I do ng serve for dev purpose ; app runs fine on localhost:4200 and can able to load above image.
When I do ng build --prod , it generates dist folder, then I copy this dist folder to my deployment server(tomcat in my case) and when try to open application, background image doesn't load.
On console it shows 404 error.
I have set base tag in my HTML <base href="./">. In dist folder, assets folder is at root level. If i try to update css to path like background: url('./assets/images/header-profile-pic.png') no-repeat center center; ng-build gives me an error,
Module not found: Error: Can't resolve './assets/images/header-profile-pic.png' in 'D:\Node\Angular 2\Router\src\app\login-component'
I have tried this answer's second bullet point and it does work. But I want to put my all images in assets folder only.
Is there any way that background image will be available in both my Dev as well as Prod env.?
