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

Answer 1

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