0

A lowly teacher here trying to sort an app out for my school so please go easy! I'm trying to get a student image to display in my Angular app and this doesn't work in my student-details.component.ts:

<img src="./images/11451.png" alt="Test" width="84"
     height="120">

My file structure

If I use URLs then it displays fine so I'm thinking it's a problem with the file structure. Could anybody help please? I'm using ng serve -o to see the app if that makes a difference on localhost:4200

Rob W
  • 591
  • 1
  • 7
  • 22

1 Answers1

3

The recommended practice is to put your images in the assets folder,

If you add images in the assets/images folder, then this line of code should work in your templates 

src
|__assests
   |__images
      |__myimage.png

and access it as

<img alt="My image name" src="./assets/images/myimage.png">
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Thank you @Sajeetharan! For my own learning purposes, what was wrong with my method? I thought that I could use the ./ notation to navigate around from the component HTML file – Rob W May 30 '20 at 05:02
  • By default in angular cli path is set for assets folder for static data say images, some css files fonts etc. If you want to load from your component folder you need something like this https://stackoverflow.com/questions/36287518/angular-2-img-src-in-a-relative-path – Sajeetharan May 30 '20 at 05:05