13

I have a component whose SCSS references an image in the same component folder, using background-image: url('./logo.jpg').

Removing the leading ./ does not help either. In any case, the image does not show in the browser.

I am running ng serve and looking at the dist folder, logo.jpg is indeed copied and placed in the same component folder as expected.

I would also like to be able to reference images from other locations outside the folder that my .css or .scss file lives in, using relative paths like I do with my component .html and .css from the .ts file.

I think I need some sort of url resolver that would generate the full URL on the outputted .css file. How would I obtain such a resolver and how do I configure it in Angular CLI?

3 Answers 3

13

Had the same problem. Solved it by changing the path in the Less/Sass file to url(/assets/path_to_img) and it should work. Don't forget the "/" at the beginning and to put your image in the assets folder.

2

I noticed a similar behavior.

It seems that images referenced in the CSS under the Assets folder are extracted and given a guid, whereas the same does not apply to Component level CSS.

In the end I copied the image file under the Assets folder (without referencing it in Angular-cli.json) and then I was able to reference it in the component CSS with:

background: url(assets/img/bgs/footer.png);

0

try using this background-image: url("./~/assets/images/artist-bg.jpg");

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.