Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Path to images not working in my Angular 4 file

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

like image 922
Sahil Aggarwal Avatar asked Aug 19 '17 11:08

Sahil Aggarwal


People also ask

Why images are not showing in Angular?

You're using the wrong path to the images. In the Angular project, you don't have to add the relative path from your file to image file. Angular resolves this problem for you, and in a component, you have to only add a path to the assets folder, instead of ../../assets. Please insert min.

What is asset folder in Angular?

The Angular application has a default assets folder. By default, whatever you put in the assets folder you can access it directly from the browser and queried through an HTTP request. You can create your own folder like assets by adding that folder to the assets section in the angular. json file.


3 Answers

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

enter image description here enter image description here

like image 142
Gilbert lucas Avatar answered Oct 24 '22 03:10

Gilbert lucas


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.

like image 1
Faisal Avatar answered Oct 24 '22 04:10

Faisal


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 !

like image 1
pnklshh Avatar answered Oct 24 '22 02:10

pnklshh