[html] Angular 4 img src is not found

I'm having a problem with sourcing an image with angular 4. It keeps telling me that the image is not found.

Folder structure:

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

This question is related to html image angular src

The answer is

Create image folder under the assets folder

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

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

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"/>

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

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

Add in angular.json

  "assets": [

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

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

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>

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

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!

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.

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.


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


<img [src]="imagePath">

Try This:

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

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.

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.

<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


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to image

Reading images in python Numpy Resize/Rescale Image Convert np.array of type float64 to type uint8 scaling values Extract a page from a pdf as a jpeg How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? Angular 4 img src is not found How to make a movie out of images in python Load local images in React.js How to install "ifconfig" command in my ubuntu docker image? How do I display local image in markdown?

Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to src

OpenCV TypeError: Expected cv::UMat for argument 'src' - What is this? Angular 4 img src is not found Rotate an image in image source in html html script src="" triggering redirection with button What is the right way to write my script 'src' url for a local development environment? How to properly reference local resources in HTML? Dynamically add script tag with src that may include document.write Programmatically change the src of an img tag Get img src with PHP Javascript : get <img> src and set as variable?