不从 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. 在资产前添加 /

希望这对某人有所帮助！

祝你好运