Angular 4+ background css reference URL image path

Question

I am forever plagued by trying to reference an image from across my application. The directory structure is:

src/app/assets/images/splashImage.png

In this trivial case, I'm trying to reference it from:

src/app/app.component.html

The first line of the html:

<div class="splashContainer">

The css file:

.splashContainer {
background: url("../../assets/images/splashImage.png") no-repeat center center fixed;

The build diagnostic says it can't find the file at --> the URL path from above.

My rule that obviously is wrong is to count up starting at the folder housing the html. app is 1 and src is 2, which gets me above the assets folder. Thus the two ../ parts.

What am I doing wrong?

Thanks in advance. Yogi

Answer 1

Try

background: url(assets/images/splashImage.png) no-repeat center center fixed;

Answer 2

Do not use paths like ../dir or ../../dir since relative paths like this will most likely fail in the server after build. Since assets/ folder is declared by default in the angular.json file. I suggest you use inline css just for the image only. For instance:

<div class="bg-div" style="background-image: url(assets/images/imageX.png)"></div>

Then continue with the other css in your css file: i.e.

.bg-div: {
  background-size: cover;
  background-position: center center;
  height: 100%;
  position: relative;
}

This way it will work for both local builds during development and during deployment. You wont have to change the paths during build again.

This is if you have another external css file apart from the main angular's styles.css