Angular 2 Load CSS background-image from assets folder

Question

My folder structure looks like

-myapp
    -assets
        -home-page-img
            -header-bg.jpg
    -src
        -app
        -home-page
            -home-page.component.css
            -home-page.component.html
            -home-page.component.ts

Inside my home-page.component.css, I have the following

header {
    width: 200px;
    height: 200px;
    background-image: url('/src/assets/home-page-img/header-bg.jpg');
}

My angular-cli.json
    "assets": [
    "assets",
    "favicon.ico"
]

When I run the code, I get

GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)

For demonstrating purpose, If I change background-image to the following, I get a whole different error

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'

How can I get that image to load?

Check where the pictures are located in the dist folder. You should never access the src folder, it won't be available in production builds anyway. — sandrooco
– sandrooco, Commented Mar 15, 2017 at 6:26
That would make sense. However, if I reference the dist folder it would give me an error as dist folder does not exist until I run ng build --prod. — ErnieKev
– ErnieKev, Commented Mar 15, 2017 at 6:28
use relative path with ref to your css in your dist.. try ../assets/home-page-img/header-bg.jpg . Thats what works for me in my ionic 2 project.. — Suraj Rao
– Suraj Rao, Commented Mar 15, 2017 at 6:30
try background-image: url('../../assets/home-page-img/header-bg.jpg'); — Thyagarajan C
– Thyagarajan C, Commented Mar 15, 2017 at 7:15
@Thyagu That worked! Thanks. Please provide as answer and I can vote for it — ErnieKev
– ErnieKev, Commented Mar 15, 2017 at 7:22

Samuel Seda · Accepted Answer · 2018-02-20 17:27:50Z

130

I use it. Always starting with "/assets/" in CSS and HTML "assets/". And I have no problems. Angular recognizes it.

CSS

.descriptionModal{
    background-image: url("/assets/img/bg-compra.svg");
}

HTML

<img src="assets/img/ic-logoembajador-horizontal.svg" alt="logoEmbajador">

answered Feb 20, 2018 at 17:27

Samuel Seda

2,9121 gold badge26 silver badges13 bronze badges

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

8 Comments

Kris Bunda Over a year ago

This is what I had to do--when I moved the image styling to a scss sheet in a "styles" folder (out of the component's scss file). I kept getting compile errors until I switched to double quotes and just started the path from "/assets/...."

sgClaudia98 Over a year ago

I use SCSS set the backgorund-image to url(/assets/...), when I build doesnt show error, but in the WebStorm IDE shows this error cannot resolve file... I tried '...' and "..." but still geting the red underline. Any idea to remove the annoying error?

WSD Over a year ago

Or just background-image: url('~assets/img/background.svg');

Ambrus Tóth Over a year ago

This should be the accepted answer, it covers CSS and html usage as well and it is an absolute path, so you don't have to change it when you move your source files.

Brian White Over a year ago

It does assume, however, that the app and it's assets will be served under / and not some subdirectory.

|

Paul Rooney · Accepted Answer · 2019-03-13 02:41:10Z

91

try

background-image: url('../../assets/home-page-img/header-bg.jpg');

edited Mar 13, 2019 at 2:41

Paul Rooney

21.7k9 gold badges47 silver badges64 bronze badges

answered Mar 15, 2017 at 7:24

Thyagarajan C

8,2431 gold badge24 silver badges25 bronze badges

5 Comments

Lakin Mohapatra Over a year ago

It really helped.

javrd Over a year ago

It's better use @samuel-ivan (stackoverflow.com/a/48890991/10447654) answer as it uses absolute path, it will not depends on your folder structure.

Thyagarajan C Over a year ago

@huanfeng No, you might have an error if the path is incorrect

Mick Over a year ago

This results in Angular duplicating the assets and placing them into the root :(

danday74 Over a year ago

This works always, even if the assets are not served under / but are instead served under a subdirectory - however, the answer from Aarji George is more succinct '~src/assets/...'

Hieu Tran AGI · Accepted Answer · 2019-06-04 06:20:15Z

37

For background-image: url(/assets/images/foo.png), I have another problem with i18n + base-href, finally I found a workaround solution.

My problem was solved by:

background-image: url(~src/assets/images/foo.png) .

image tag:

<img src="assets/images/foo.jpg" />

answered Jun 4, 2019 at 6:20

Hieu Tran AGI

9299 silver badges9 bronze badges

2 Comments

Darkade Over a year ago

Great! I was just looking for this. I'm also using i18n

PeterB Over a year ago

I am using --base-href and this was the only one that worked with base-href and also without it.

Gidon · Accepted Answer · 2021-01-28 09:04:05Z

20

Demystifying Angular paths to resources in CSS files

This is not documented nor has anyone to my knowledge written about it.

This is true for Angular 11 but has certainly been around for a while.

(Note: setting --base-href or --deploy-url in ng build has no consequence to the following).

The regular way to include assets in a css file, such as:

background-image: url(/assets/someImage.png);

is with a leading slash. During the build prosses (ng serve or ng build), if angular sees that leading slash, It will ignore that path, meaning it will copy it as is. So the browser will see that path '/assets/someImage.png', and will look for that file starting at the root or as we call it domain. (Note: paths in CSS are relative to the location of the CSS file, but even in CSS a leading slash means looking for the file starting form root). Angular assumes you put that file In the default assets folder, who's contents are copied as is to the dist folder, and that sits by default in the root, so someDomain.com/assets/someImage.png just works.

However, if for some reason you are trying to do something else, and you remove that slash, a whole new prosses is happening. For example, lets say you now write

background-image: url(assets/someImage.png);

without the slash. (for example when you deploy your app to an inner folder in a domain 'someDomain.com/some-folder/', and assets is in that folder. With the slash it will look for assets in the root, and it not there, its in some-folder. So you remove the slash thinking that it will also copy that code as is and look for assets from where the css file is, which is what the browser will do).

Surprise! Angular this time does not ignore that file path!! it looks for it during build time!! and it doesn't fine it, and you get that annoying error saying angular can't find that file. So what you do is rewrite that path until angular can find it (in your file system), for example: if your in a deeply nested component

background-image: url(../../../../assets/someImage.png);

And then, boom, it works, but take a look at what happened to your dist folder and to your CSS code. Angular makes two copies of the someImage.png file. One in the regular assets folder and the other in the root, right next to all the js bundles. And in you CSS file

background-image: url(../../../../assets/someImage.png);

will be rewritten to

background-image: url(someImage.png);

This works, but not exactly nice dist folder structure. This behaver is same for global style.css or component style that gets injected to the index.html or shadowRoot (ViewEncapsulation.shadowDom)

(Note: in the html templates there are no checks or rewrites)

edited Jan 28, 2021 at 9:04

answered Jan 19, 2021 at 20:43

Gidon

2753 silver badges5 bronze badges

3 Comments

lincetto Over a year ago

Hi @gidon, many thanks fr your explanation. But if our assets are served from a subfolder, how do we have to configure url in the css, in order to have it loaded from the subfolder, and having the image not copied twice in the dist folder?

Gidon Over a year ago

@lincetto In the css file always start with a slash. So if the image is in assets/some_subfolder the path would be: background-image:url(/assets/some_subfolder/someImage.png);. If you want a folder in a different location you can edit the assets property in angular.json, and point to that folder from css with a slash.

kvetis Over a year ago

Currently the resulting image file path will have its hash added while processed which enables you to set up infinite caching for it.

Aarji George · Accepted Answer · 2020-07-17 10:23:57Z

15

We can use relative path instead of absolute path:

.logo{
  background-image: url('assets/home-page-img/header-bg.jpg');
}

or

.logo{
  background-image: url('~src/assets/home-page-img/header-bg.jpg');
}

answered Jul 17, 2020 at 10:23

Aarji George

6295 silver badges9 bronze badges

2 Comments

numerical25 Over a year ago

Not sure why this is not the number one answer.

Ricardo Saracino Over a year ago

~src/assets/ also solved my IDE errors

xianshenglu · Accepted Answer · 2022-02-14 09:22:52Z

11

@Samuel Ivan's answer does not work for me. Maybe because I am developing an internationalization project. At the end, ^ helps me with

.descriptionModal{
    background-image: url("^assets/img/bg-compra.svg");
}

And the answer comes from https://github.com/angular/angular-cli/issues/12797

answered Feb 14, 2022 at 9:22

xianshenglu

5,4483 gold badges21 silver badges39 bronze badges

1 Comment

Albert Llorens Mestre Over a year ago

That's the only way that worked for me in Angular 11 as I have a base-href put for the server and I am developing without it in local, so I needed a relative path. Works with both cases.

Shivam Baghel · Accepted Answer · 2022-08-26 07:59:55Z

Everyone's missing one thing base-href.

2 Ways:

background-image: url("^assets/img/bg.svg"); [TLDR; just use this]

This will work even if its going to be deployed in a subdirectory rather than root (i.e. you specify a base-href other than the default /).

background-image: url("../assets/img/bg.svg"); [Using relative path]

Using the relative path from the current css,scss,sass file to the actual image in the project folder like. This will work if the assets folder is 1 level above in the directory tree. ("../../" for 2 levels and so on..) Using a different base-href will not work with this one.

Also, in the build; for the first case this file will be used:

dist/app-name/assets/img/bg.svg

and for the second case the same file will be copied over to the app-name directory and used from there (causing unnecessary redundancy if you already have src/assets in the build assets array in angular.json, which you will in most cases):

dist/app-name/bg.svg

Reference: GH Issue

JC Guidicelli · Accepted Answer · 2018-06-21 09:08:58Z

3

Try to use this below:

background-image: url('./../assets/home-page-img/header-bg.jpg');

edited Jun 21, 2018 at 9:08

JC Guidicelli

1,3268 silver badges16 bronze badges

answered Jun 21, 2018 at 8:47

Enetty

415 bronze badges

Comments

Udeesha Induwara · Accepted Answer · 2020-12-19 08:28:01Z

3

Angular 9+ This Works for me.

.main-bg{
  background-image: url("src/assets/main-bg.png");
}

answered Dec 19, 2020 at 8:28

Udeesha Induwara

6151 gold badge11 silver badges20 bronze badges

Comments

PPM BUA · Accepted Answer · 2021-01-12 02:41:04Z

2

My problem was solved by:

background-image: url(~src/assets/images/foo.png) .

the same with Hieu Tran AGI

answered Jan 12, 2021 at 2:41

PPM BUA

212 bronze badges

Comments

Tyler2P · Accepted Answer · 2021-02-15 01:41:53Z

1

You should fix to the file path. My problem was solved:

background-image: url('../assets/img/logo.jpg')

edited Feb 15, 2021 at 1:41

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Feb 14, 2021 at 18:31

Yigit

111 bronze badge

Collectives™ on Stack Overflow

Angular 2 Load CSS background-image from assets folder

11 Answers 11

8 Comments

5 Comments

2 Comments

3 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

8 Comments

5 Comments

2 Comments

3 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related