javascript - Path to images not working in my Angular 4 file - Stack Overflow

admin管理员组

文章数量:1192976

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:['./helloponent.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!!

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

• javascript
• json
• angular

Share Improve this question Follow asked Aug 19, 2017 at 11:41 Sahil AggarwalSahil Aggarwal 13911 gold badge11 silver badge1212 bronze badges 3

• Path should not contain src, src folder is the root of your app. http://localhost:4200/assets/images/1.jpg – Ploppy Commented Aug 19, 2017 at 11:44
• @Ploppy,I have also tried using that but this is also not working – Sahil Aggarwal Commented Aug 19, 2017 at 11:46
• Did you solve this case? – bielas Commented Nov 2, 2017 at 14:16

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 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

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.

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 !

Try this,

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

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

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

Change your folder path From

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

To

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

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

本文标签： javascriptPath to images not working in my Angular 4 fileStack Overflow