Cannot get relative image path in angular 6

Question

This is the structure of my folders

angular-src
--src
--app
----components
------whatever.html
public
--images
----01.jpg

I want to access 01.jpg from whatever.html.

I tried many alternatives like <img src="../../../../public/images/01.jpg"> or <img src="../../../../../public/images/01.jpg"> and I keep getting 404.

I use angular 6 and node 8.11.1. What am I missing here?

Thanks

Answer 1

At first you should move your assets like the img you use into the assets folder which is a direct child of src.

You should then be able to call the image directly by <img src="assets/images/01.jpg">

Answer 2

In your .angular.json you can define the glob as this one

"assets": [
    {"glob": "**/*", "input": "../../public", "output": "./assets/"}
]

This will copy the contents of your public folder to the /dist/assets/ directory. Then, use it like

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