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

css image angular angular2-routing static-files
Sumit Agarwal picture Sumit Agarwal · Sep 30, 2016 · Viewed 11.2k times · Source

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

Madhu Ranjan picture Madhu Ranjan · Sep 30, 2016

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!!

Related questions

How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More
How to vertically align an image inside a div

How can you align an image inside of a containing div? Example In my example, I need to vertically center the <img> in the <div> with class ="frame": <div class="frame" style="height: 25px;"> &…

Read More
CSS force image resize and keep aspect ratio

I am working with images, and I ran across a problem with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, height and width are already specified. I added CSS rule for images: …

Read More