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:

<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:

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

which is basically img/myimage.png, it doesn't work. If I use:

<img [src]="imagePath">

It says NOT FOUND (htttps://localhost/img/myimage.png). Can you help me?

Nardone

Can you create a plnkr ? BTW [src]="imagePath" is the correct implementation for Angular 4 – Lemon

I guess that your path to the image is not correct! – Kopp

@Lemon Yeah, I Know that's why I am losing my mind. my imagePath is like "img/myimage.png" and it says not found when I use [src]="imagePath". – Nardone

If you can type the htttps://localhost/img/myimage.png in a separate window and it still says not found then as @YordanNikolov suggest it just does not exist regardless of angular. – Lemon

I am getting the array of images from http request and pushing into array and displaying using ngfor . for the first set it works and after the page scroll dynamic fetching of images not working. Can you tell me wh – Bosk

Check those paths were mapping properly towards the images. – Aplacental

Answer 1

AngularJS

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

Angular

<img [src]="imagePath">

Chace

2/4 example not working for me <img [ERROR ->][src]="../assets/images/hellotravelindia-small.png"> – Brute

@HidaytRahman - Use like this - src="assets/images/hellotravelindia-small.png" – Semiaquatic

I am getting the array of images from http request and pushing into array and displaying using ngfor . for the first set it works and after the page scroll dynamic fetching of images not working. Can you tell me why – Bosk

Answer 2

Copy your images into the assets folder. Angular can only access static files like images and config files from assets folder.

Try like this: <img src="assets/img/myimage.png">

Miffy

I am getting the array of images from http request and pushing into array and displaying using ngfor . for the first set it works and after the page scroll dynamic fetching of images not working. Can you tell me wh\ – Bosk

Yes exactly!! I was facing the same problem and your solution worked as a charm.. Thanks a lot. – Newell

Answer 3

Create image folder under the assets folder

<img src="assets/images/logo_poster.png">

Carrero

Answer 4

Angular 4 to 8

Either works

<img [src]="imageSrc" [alt]="imageAlt" />

<img src="{{imageSrc}}" alt="{{imageAlt}}" />

and the Component would be

export class sample Component implements OnInit {
   imageSrc = 'assets/images/iphone.png'  
   imageAlt = 'iPhone'

Tree structure:

-> src 
   -> app
   -> assets
      -> images
           'iphone.png'

Intimate

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>

Perfunctory

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>

Chordophone

Out of the three the first is the one for which both the IDE and lint scream at you the least. – Parenteral

Answer 7

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!

Nardone

Answer 8

<img src="images/no-record-found.png" width="50%" height="50%"/>

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 

Aforetime

Answer 9

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>

Oculomotor

Answer 10

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.

Narbonne

Answer 11

An important observation on how Angular 2, 2+ attribute bindings work.

The issue with [src]="imagePath" not working while the following do:

• <img src="img/myimage.png">
• <img src={{imagePath}}>

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 <img src=garbage*Th_i$.ngs>, however Angular will.

My recommendation is to use an inline-if in case the variable might not be defined, such as <img [src]="!!imagePath ? imagePath : 'urlString'">, 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.

Jazzy

Answer 12

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.

Joell

Answer 13

You must use this code in angular to add the image path. if your images are under assets folder then.

<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>

if not under the assets folder then you can use this code.

<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>

Nazareth

Answer 14

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 :

<img [alt]="My image name" src="./assets/img/myImageName.png'">

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.

Garfield

Answer 15

Add in angular.json

  "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

And then use it like this: <img src={{imgPath}} alt="img"></div>

And in ts: storyPath = 'assets/images/myImg.png';

Warrigal

Answer 16

Try This:

<img class="img-responsive" src="assets/img/google-body-ads.png">

Health

Answer 17

This was my problem, I added src/app/types/types.d.ts with content:

declare module '*.png' {
    const value: any
    export default value
}

declare module '*.jpg' {
    const value: any
    export default value
}

declare module '*.svg' {
    const value: any
    export default value
}

Hyperactive