Path to images not working in my Angular 4 file

Question

I am a beginner in learning angular 4 framework and have seen all the threads regarding this problem on stackoverflow but the solutions given in them not able to solve my problem.

I am getting this error "http://localhost:4200/src/assets/images/1.jpg 404 (Not Found)" .All other things are working fine but only image is not getting loaded. I am giving my .angular-cli.json code and my custom made component code where i given my img tag.

My custom component code:-

import { Component } from '@angular/core';


@Component({
    selector:'my-comp',
    template:`<button (mousemove)="clicked($event)">{{name1}}</button>
                <div *ngIf="applyDiv==false">WTF</div>
                <ul>
                    <li *ngFor="let i of a;let j=index">{{j}}.{{i}}</li>
                </ul>    

                <img src="../../src/assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000"/>
                <input type="text" name="Sahil" value="sahil"/>
                <div [class.myClass]="myclass">Apply Class</div>
                <div [style.color]="applyBlue?'blue':'yellow'">Starting Angualr</div>`,
    styleUrls:['./hello.component.css']


})

export class HelloComponent {
    name='Angular1';
    myclass=true;
    applyBlue=true;
    name1=0;
    applyDiv=false;
    a=[1,'2','3iituit'];
    clicked(event){
        console.log(event.target);
        this.name1++;
    }
   // name1:string="sahil";
    //logo="../../assets/images/mov2.jpg";
}

My code .angular-cli.json:-

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "my-app"

  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [

        "assets/images",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
    }
  }
}

Can anyone tell me what is the problem here. Thanks in advance!!

Path should not contain src, src folder is the root of your app. http://localhost:4200/assets/images/1.jpg — Ploppy
– Ploppy, Commented Aug 19, 2017 at 11:44
@Ploppy,I have also tried using that but this is also not working — Sahil Aggarwal
– Sahil Aggarwal, Commented Aug 19, 2017 at 11:46

Gilbert lucas · Accepted Answer · 2018-07-11 00:16:40Z

9

You are supposed to put images in the assets folder that is inside src folder then you can specify path as assets/../image.png

answered Jul 11, 2018 at 0:16

Gilbert lucas

5709 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FAISAL · Accepted Answer · 2017-08-19 19:59:51Z

1

Assuming that your HelloComponent is inside the "src > app" folder, the following tag should display the image:

<img src="../../assets/images/1.jpg" 
          alt="Ms dhoni" 
          width="2000" height="2000"/>

If it still doesn't show, then if you are using an IDE fir development, drag the image from the assets folder and drop it in one of the .html file inside tge app folder. Check the image src path there.

answered Aug 19, 2017 at 19:59

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

Comments

pnklshh · Accepted Answer · 2018-04-09 13:28:48Z

1

Try increasing the dimensions of the image in paint. I had an image in the path src/assets/Library/Images with dimensions 60 x 45 which did not load and an image with dimensions 225 x 225 which loaded successfully. Hope this helps !

answered Apr 9, 2018 at 13:28

pnklshh

112 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-08-19 11:49:35Z

0

Try this,

<img [src]="../../src/assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000"/>

answered Aug 19, 2017 at 11:49

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

7 Comments

Sahil Aggarwal Over a year ago

i have simply using <img src> tag ,i am not doing any property binding .

Sahil Aggarwal Over a year ago

Template parse errors: Parser Error: Unexpected token . at column 1 in [../../assets/images/1.jpg] in ng:///AppModule/HelloComponent.html@6:21 (" </ul> <img [ERROR ->][src]="../../assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000"/> <input "): ng:///AppModule/HelloComponent.html@6:21

Sajeetharan Over a year ago

try <img [src]="../../src/assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000">

Sahil Aggarwal Over a year ago

try <img [src]="../../src/assets/images/1.jpg" alt="Ms dhoni" width="2000" height="2000">is this not the samething you have posted above

Sajeetharan Over a year ago

without the / tag

|

Vega · Accepted Answer · 2017-08-19 13:47:50Z

0

It should be

   <img src="assets/images/1.jpg" alt="Ms dhoni" width="200px" height="200px"/>

and make sure you have <base href="/"> in the index.html <head> tag

edited Aug 19, 2017 at 13:47

answered Aug 19, 2017 at 12:19

Vega

28.8k28 gold badges121 silver badges151 bronze badges

3 Comments

Sahil Aggarwal Over a year ago

,I have tried this,this is giving following error:"Failed to load resource: the server responded with a status of 404 (Not Found)"

Sahil Aggarwal Over a year ago

localhost:4200/assets/images/1.jpg this error is coming ihave tried all this by seeing threads given regarding this same problem on stack overflow

Vega Over a year ago

Ok, one more thing, what is your baseUrl and have you <base href="/"> in index.html ?

Newclique · Accepted Answer · 2017-11-22 05:17:58Z

Take a look at the /dest folder (or whatever you've configured as the output of your webpack) where the app is being served. Do you see any path corresponding to the path being requested? If not then, obviously, the browser isn't gonna be able to load it.

This is because Webpack (or whatever packager you are using) does not have any way of knowing what assets to include in the final deployment of your application unless you tell it - so the files aren't there. Therefore, you can either configure Webpack with a file loader (or url-loader) to output your images to a path at the destination folder structure or you can set properties on your component to the return value of the require('my image url here') function, e.g. this.myIcon=require('images/abc.png'). Use these propertiesto do an attribute binding on your IMG tag like

<img [attr.src]="myIcon" />

This will result in the bytes of the image being directly embedded into the src attribute via a data: url (inspect the final element in Chrome to see). (This last part I may not have exactly right but something definitely translates the images into base64-encoded data for your IMG src's to make them appear w/o being present in the destination folder.)

IMHO, this is a big shortcoming with something like the Angular 2 approach with Webpack. You have to configure so much crap just to produce a usable application that it may eventually make you reconsider the entire platform. The better you learn this part of the whole Angular 2 delivery process up front, the happier you will be. Here's a link to an article that may help: https://medium.com/a-beginners-guide-for-webpack-2/copy-all-images-files-to-a-folder-using-copy-webpack-plugin-7c8cf2de7676

Laxman Mekala · Accepted Answer · 2018-12-28 08:25:29Z

0

Change your folder path From

E:\Data\project - 1\Angular(learning)\app

To

E:\Data\project1\Angular(learning)\app

answered Dec 28, 2018 at 8:25

Laxman Mekala

1

Comments

Imran_Developer · Accepted Answer · 2019-12-17 05:01:21Z

0

the only solution is to convert all images into base64. and copy link and paste it in img src="".

answered Dec 17, 2019 at 5:01

Imran_Developer

3916 silver badges16 bronze badges

Collectives™ on Stack Overflow

Path to images not working in my Angular 4 file

8 Answers 8

Comments

Comments

Comments

7 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

7 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related