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_compo         


        

Answer 1

AngularJS

<img ng-src="{{imagePath}}">

Angular

<img [src]="imagePath">

Answer 2

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!

Answer 3

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 = "<img class='d-block' src='";
        let back = "' alt='slide'>";
        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 <div [innerHtml]="concatedPathName"></div>

Answer 4

You have to mention the width for the image as default

 <img width="300" src="assets/company_logo.png">

its working for me based on all other alternate way.

Answer 5

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>

Answer 6

@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 .

<div> <img src="{{myImage}}"> </div>

2 .

<div> <img [src]="myImage"/> </div>

3 .

<div> <img bind-src="myImage"/> </div>