CODEWITHSUNDEEP
angular
Glen Elkins
Glen Elkins

Reputation: 917

Angular images in css don’t load when css dynamically added

I’ll try to explain my dilemma the best I can.

So in the app I’m not using the assets folder I have my icon images in app/img/icons/ and say I have a component called “home” I can load the icon in the scss file like this:

background: url(../img/icons/test.png);

This works fine, but my dilemma comes when I dynamically add a style tag to the html and try to do the same thing, the images can’t be found. So I’m adding the style tag into the same component html document.

I’ve noticed from the web inspector that it looks like angular does something with the images when compiling, like it moves them into the root folder and it’s almost as though it doesn’t include images in the build if you’ve not used them before it’s built - if that makes sense.

So I’m wondering how I can add dynamic css to the html document and allow it to load the background images? It just seems to ignore them if not used before build unless I’m misunderstanding the structure of the final build?

Basically after the dynamic style is added to the document you have something like this:

enter image description here

And the image doesn’t load yet the exact same code works fine in the components scss file!

Upvotes: 0

Views: 468

Answers (1)

dockleryxk
dockleryxk

Reputation: 407

You need to add app/img/icons/ to your "assets" array in your angular.json

Upvotes: 2

Related Questions