Angular 4 img src is not found

Question

I m having a problem with sourcing an image with angular 4  It keeps telling me that the image is not found   Folder structure   app folder  app component    - my componenet   - image folder        - myimage   I am using the image in mycomponent  If in mycomponent  I insert it directly with     lt img src  img myimage png     This works fine  but I checked the html and it creates a hash  But my images have to be dynamically added to the html because they are part of a list  So  if I use    lt img src    imagePath    gt     which is basically img myimage png  it doesn t work  If I use    lt img  src   imagePath  gt     It says NOT FOUND  htttps   localhost img myimage png   Can you help me

User · Answer

in your component assign a variable like,

export class AppComponent {
  netImage:any = "../assets/network.jpg";
  title = 'app';
}

use this netImage in your src to get the image, as given below,

<figure class="figure">
  <img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

User · Answer

An important observation on how Angular 2  2  attribute bindings work   The issue with  src   imagePath  not working while the following do     lt img src  img myimage png  gt   lt img src   imagePath   gt    Is due your binding declaration   src   imagePath  is directly binded to Component s this imagePath or if it s part of an ngFor loop  then  each imagePath   However  on the other two working options  you re either binding a string on HTML or allowing HTML to be binded to a variable that s yet to be defined   HTML will not throw any error if you bind  lt img src garbage Th i  ngs gt   however Angular will   My recommendation is to use an inline-if in case the variable might not be defined  such as  lt img  src     imagePath   imagePath    urlString   gt   which can be though of as node src   imagePath   imagePath    something    Avoid binding to possible missing variables or make good use of  ngIf in that element

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

Angular 4 to 8  Either works   lt img  src   imageSrc   alt   imageAlt    gt    lt img src    imageSrc    alt    imageAlt      gt    and the Component would be  export class sample Component implements OnInit      imageSrc    assets images iphone png       imageAlt    iPhone    Tree structure   - gt  src     - gt  app    - gt  assets       - gt  images             iphone png

User · Answer

You have to mention the width for the image as default     lt img width  300  src  assets company logo png  gt    its working for me based on all other alternate way

User · Answer

Create image folder under the assets folder   lt img src  assets images logo poster png  gt

User · Answer

Check in your angular-cli json under app -  assets    if you have included assets folder   Or perhaps something here  https   github com angular angular-cli issues 2231  can help

User · Answer

Annk you can make a variable in the   component ts file  myImage   string    http   example com path image png    and inside the    component html file you can use one of those 3 methods    1     lt div gt   lt img src    myImage    gt   lt  div gt    2      lt div gt   lt img  src   myImage   gt   lt  div gt    3      lt div gt   lt img bind-src  myImage   gt   lt  div gt

User · Answer

Well  the problem was that  somehow  the path was not recognized when was inserted in src by a variable  I had to create a variable like this   path any   require        img myImage png      and then I can use it in src  Thanks everyone

User · Answer

AngularJS   lt img ng-src    imagePath    gt    Angular       lt img  src   imagePath  gt

User · Answer

Copy your images into the assets folder  Angular can only access static files like images and config files from assets folder   Try like this   lt img src  assets img myimage png  gt

User · Answer

You must use this code in angular to add the image path  if your images are under assets folder then     lt img src     assets images logo png  id  banner-logo  alt  Landing Page   gt    if not under the assets folder then you can use this code    lt img src     images logo png  id  banner-logo  alt  Landing Page   gt

User · Answer

Try This    lt img class  img-responsive  src  assets img google-body-ads png  gt

User · Answer

Angular can only access static files like images and config files from assets folder  Nice way to download string path of remote stored image and load it to template     public concateInnerHTML path  string   string        if path           let front     lt img class  d-block  src             let back      alt  slide  gt            let result   front   path   back          return result              return null        In a Component imlement DoCheck interface and past in it formula for database  Data base query is only a sample   ngDoCheck    void      this concatedPathName   this concateInnerHTML database query  src         And in html tamplate  lt div  innerHtml   concatedPathName  gt  lt  div gt

User · Answer

Add in angular json                assets                    src favicon ico                  src assets                   And then use it like this           lt img src   imgPath   alt  img  gt  lt  div gt   And in ts    storyPath    assets images myImg png

User · Answer

lt img src  images no-record-found png  width  50   height  50    gt    Your images folder and your index html should be in same directory follow following dir structure   it will even work after build  Directory Structure  -src      -images      -index html      -app

[html] Angular 4 img src is not found

Examples related to html

Examples related to image

Examples related to angular

Examples related to src