不從 Angular 7 中的本地路徑加載圖像

Question

它不是從本地路徑加載任何圖像，而是從互聯網加載圖像。 請幫我從本地加載圖像。 我在項目本身中創建了包含圖像的文件夾。

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() {}
}

測試組件.html

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

進入頁面時出錯

Cannot GET /img1.png

Answer 1

將圖像文件夾放置在資產文件夾中並提供路徑。

Answer 2

我遇到了類似的問題並且是新手，這是我的第一反應，所以希望我沒有在這里違反任何規則。

我對圖像問題的建議

1. 確保所有路徑和鏈接大小寫匹配，即“圖像”文件夾與“圖像”不同
2. 在“angular.json”和“component.html”中匹配“assets”小“A”很重要
3. 在資產前添加 /

希望這對某人有所幫助！

祝你好運