Relative Path for static files like images/css/js etc

Question

I have folder structure of /src/app/some-module/some-component and src/public/images/user.png. Now, when I am wiling to show an image in my some-component I have to give the path as ../../../public/images/user.png which seems to be too naive and wasteful effort once the number of images increase.

Do we have a routing mechanism or relative path in place in angular2 to serve static files. I am using the Angular2 with webpack.

Answer 1

It depends on how your base href looks like.

For e.g if you have

<base href="/src/">

you may easily use below irrespective of where your component template is.

<img src="public/images/user.png" />

Hope this helps!!

Answer 2

If you use WebPack, it takes care of the paths during the build. The <img src="..."> needs to point to the physical location of the file within the project, relative to the template where it is used.

For instance, in my case, without WebPack, it would be

<img src="img/rhamt-square-248.png" width="172">

since the img/ is directly under the app root.

Whereas with WebPack, this works:

<img src="../../../img/rhamt-square-248.png" width="172">

Otherwise you'd get a compilation error such like:

ERROR in ./src/app/misc/about.component.html
Module not found: Error: Can't resolve './img/rhamt-square-248.png' in '/home/ondra/work/Migration/windup-web/ui/src/main/webapp/src/app/misc'
@ ./src/app/misc/about.component.html 1:402-439
@ ./src/app/misc/about.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts