Angular Image Path

Question

This question is from the open source project.

All images are stored in assets folder and the file is located in app/customer folder from where the code to load images is specified. The code is -

<img src="assets//images/{{customer.gender | lowercase}}.png" class="details-image" alt="">

The folder structure is -

-app
 -customer
  -fileLocation
-assets
 -images
  -image1.png

The images load properly. My question is - 'How the images are loading even the files are located at different levels? I cannot see the settings anywhere.

The image is called from file which is located in app/customer and the image is located in assets folder which is at same level as app folder. But nothing is specified like go one level up, then assets folder ..... — random
– random, Commented Oct 14, 2018 at 7:44
@Aparna reason is simple Angular-cli knows about assets folder — Vikas
– Vikas, Commented Oct 14, 2018 at 8:07
Thanks Vikas. Angular knewed it, but I did not knew how the angular knew it? — random
– random, Commented Oct 14, 2018 at 8:09

Vivek Kumar · Accepted Answer · 2018-10-14 07:53:14Z

2

if you are using angular6 you are customize your assets in angular.json file for angular4/5 you can .angular-cli.json

In the screenshot you can see the path hierarchy for assets.

Also when you build your project ng build, then from the generated dist folder you can see the assets folder path relation to index.html file

edited Oct 14, 2018 at 7:53

answered Oct 14, 2018 at 7:49

Vivek Kumar

5,1109 gold badges55 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

random Over a year ago

Yes, I can see this code specified in angular.json file. It means when I mention 'assets' the path will get mapped to 'src/assets'. Am I correct?

Vivek Kumar Over a year ago

no, from the dist folder you can view this relative path

Vivek Kumar Over a year ago

your app is just the index.html file since it a single-page-application. So index.html and 'assets` folder are at the same level. so the root-path ie / is folder containing index.html file. so anywhere in the application it should be either "/assets/<path to resource>" or ` "assets/<path to resource>"`

random Over a year ago

No, but dist folder is created after the build. I have not build the project.

Vivek Kumar Over a year ago

when you do ng-serve then angular-cli creates something like dist in the memory not on disk for server the content fast for development purpose. Since it is in in-memory we don't see that

|

Collectives™ on Stack Overflow

Angular Image Path

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related