Background image not found after deploying angular 4 app into tomcat

Question

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.?

Answer 1

UPDATE:

As <image> tag accepts the source path, try this workaround:

Set the style online in the HTML:

...[ngStyle]="{'background-image': 'url(/assets/images/header-profile-pic.png)'}" ..

and leave in the CSS:

background: no-repeat center center;

---

Old answer:

You don't have to change your stylesheet for development and production. Correct it to the following:

background: url(/assets/images/header-profile-pic.png) no-repeat center center

Answer 2

try this I'm not sure about it

remove backslash before the assets

background: url('assets/images/header-profile-pic.png') no-repeat center center;