How to load image and other assets in Angular an project

Question

I m pretty new to Angular so I m not sure the best practice to do this    I used angular-cli and ng new some-project to generate a new app    In it created an  images  folder in the  assets  folder  so now my images folder is src assets images  In app component html  which is the root of my application   I put    lt img class  img-responsive  src  assets images myimage png  gt    When I do ng serve to view my web application  the image does not display    What is the best practice to load up images in an Angular application    EDIT  See answer below  My actual image name was using spaces  which Angular did not like  When I removed the spaces in the file name  the image displayed correctly

User · Answer

Normally  app  is the root of your application -- have you tried app path to assets img png

User · Answer

I fixed it  My actual image file name had spaces in it  and for whatever reason Angular did not like that  When I removed the spaces from my file name  assets images myimage png worked

User · Answer

for me  quot I quot  was capital in  quot Images quot   which also angular-cli didn t like  so it is also case sensitive  Some web servers like IIS don t have problem with that  if angular application is hosted in IIS  case sensitive is not a problem

User · Answer

Being specific to Angular2 to 5  we can bind image path using property binding as below  Image path is enclosed by the single quotation marks   Sample example   lt img  src    assets img klogo png   alt  image  gt

User · Answer

In my project I am using the following syntax in my app component html   lt img src  quot  assets img 1 jpg quot  alt  quot image quot  gt   or  lt img src  http   mruanova com img 1 jpg  alt  image  gt   use  src  as a template expression when you are binding a property using interpolation   lt img  src   quot imagePath quot    gt   is the same as   lt img src   imagePath     gt   Source  how to bind img src in angular 2 in ngFor

User · Answer

It is always dependent on where is your html file that refers to the path of the static resource  in this case the image    Example A   src    assests       images          myimage png    yourmodule       yourpage html   As you can see  yourpage html is one folder away from the root  src folder   for this reason it needs one amount of     to go back to the root then you can walk to the image from root    lt img class  img-responsive  src     assests images myimage png  gt    Example B   src    assests       images          myimage png    yourmodule       yoursubmodule          yourpage html   Here you have to go u in the tree by 2 folders    lt img class  img-responsive  src        assests images myimage png  gt

User · Answer

Angular-cli includes the assets folder in the build options by default  I got this issue when the name of my images had spaces or dashes   For example      my-image-name png  should be  myImageName png   my image name png  should be  myImageName png    If you put the image in the assets img folder  then this line of code should work in your templates     lt img alt  My image name  src    assets img myImageName png  gt    If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options

User · Answer

1   Add this line on top in component   declare var require  any   2   add this line in your component class   imgname  require     images imgname png       add this  imgname  in img src tag on html page    lt img src   imgname   alt    gt

[html] How to load image (and other assets) in Angular an project?

Examples related to html

Examples related to angular

Examples related to angular-cli