Not loading image from local path in Angular 7

问题

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

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/53149802/not-loading-image-from-local-path-in-angular-7

标签

html