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

Then try ./assets/images/splashImage.png as location for background-img — Tobias
– Tobias, Commented Jan 31, 2018 at 12:51
ERROR in ./src/app/app.component.scss Module not found: Error: Can't resolve './assets/Images/SolutionHunter%20Splash%20Image.png' in 'D:\Solution Hunter Engineering\Active Development\Hunter2\src\app' — Yogi Bear
– Yogi Bear, Commented Jan 31, 2018 at 12:53

Pang · Accepted Answer · 2018-02-01 01:24:34Z

8

Try

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

edited Feb 1, 2018 at 1:24

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jan 31, 2018 at 12:23

nithalqb

2431 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yogi Bear Over a year ago

I tried: background: url("assets/Images/SolutionHunter%20Splash%20Image.png") no-repeat center center fixed; and got ERROR in ./src/app/app.component.scss Module not found: Error: Can't resolve './assets/Images/SolutionHunter%20Splash%20Image.png' in 'D:\Solution Hunter Engineering\Active Development\Hunter2\src\app' resolve './assets/Images/SolutionHunter%20Splash%20Image.png' in 'D:\Solution Hunter Engineering\Active Development\Hunter2\src\app' using description file: D:\Solution Hunter Engineering\Active Development\Hunter2\package.json (relative path: ./src/app)

nithalqb Over a year ago

What is Solution Hunter after images here? assets/Images/SolutionHunter. The image file name is splashImage.png right?

nithalqb Over a year ago

Great Yogi, you got a solution. But i have a suggestion, i thinks it's better to use a image file name without space, what i understand from your answer is you are having an image file with name 'SolutionHunter Splash Image.png', and also it should work background: url(assets/images/yourfilename.png), as it's working for me. Thanks

Brian · Accepted Answer · 2020-05-15 20:33:57Z

6

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

edited May 15, 2020 at 20:33

answered May 15, 2020 at 19:56

Brian

9619 silver badges21 bronze badges

Comments

Yogi Bear · Accepted Answer · 2018-01-31 13:03:59Z

1

Thanks for all your help. I figured out the answer. First: my "formula" for the path was wrong. I should start counting from the parent of the folder that contains the file. So in this case: app contains the html, scss so I don't count it. However, its parent Src is 1 and it IS above the assets. so the path is ../assets etc at the point webstorm was happy with the path, but not with the file name. SO, I got rid of the %20's in the path and replaced them with blanks. Thus:

background: url("../assets/Images/SolutionHunter Splash Image.png") no-repeat center center fixed;

This works. Thanks for your assist. Yogi

answered Jan 31, 2018 at 13:03

Yogi Bear

9633 gold badges17 silver badges36 bronze badges

2 Comments

Tobias Over a year ago

You should not use spaces in filenames, it can really mess up things. I suggest you change the image name to solutionHunterSplashImage.png

Yogi Bear Over a year ago

I agree .. will do. Thanks.

Gidon · Accepted Answer · 2021-01-19 20:47:19Z

1

See this Answer.

Detailed explanation to Angular's path resolution in CSS files.

https://stackoverflow.com/a/65799235/10569886

answered Jan 19, 2021 at 20:47

Gidon

2753 silver badges5 bronze badges

Collectives™ on Stack Overflow

Angular 4+ background css reference URL image path

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related