Not loading image from local path in Angular 7

Question

It's not loading any image from local path, but loading images from internet. Please help me load images from local. I have created the folder containing images inside the project itself.

test.component.ts

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

@Component({
    selector: 'test-app',
    templateUrl: './test.component.html'
})

export class TestComponent implements OnInit {

    image1= '/img1.png';
    image2= 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCNTJ-wSPyf8KvKYO-SKhfWi6EkpfgpaBYpcmWlpcyiHhXhzCvBw';
    constructor(){ }

    ngOnInit() {}
}

test.component.html

<img class="mx-auto d-block" [src]="image1" alt="Image 1">
<img class="mx-auto d-block" [src]="image2" alt="Image 2">

Error coming on the page

Cannot GET /img1.png

Add your images in the assets folder enter the path as "assets/imagePath". Example - . Check for spelling, extension of file name. — random, Nov 05 '18 at 07:12

score 1 · Accepted Answer · answered Nov 05 '18 at 08:02

1

Put the Images folder in assets folder and give the path.

answered Nov 05 '18 at 08:02

Adarsh Singh

208
1
3
17

score 0 · Answer 2 · answered Sep 28 '19 at 16:06

I ran into similar problem and being new, and this is my first response, so hopefully, I am not breaking any rules here.

My suggestions for image issues

ensure all paths and links case MATCHED ie "image" folder is different than "Image"
Important to match "assets" small 'A' both in "angular.json" and in "component.html"
add a / before assets

Hopefully this helps someone!

good luck

Not loading image from local path in Angular 7

2 Answers2

Linked