不从Angular 7中的本地路径加载图像答案

【问题标题】：Not loading image from local path in Angular 7不从Angular 7中的本地路径加载图像
【发布时间】：2019-04-08 12:59:58
【问题描述】：

它不是从本地路径加载任何图像，而是从互联网加载图像。请帮我从本地加载图像。我已经在项目本身中创建了包含图像的文件夹。

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">

页面出现错误

Cannot GET /img1.png

【问题讨论】：

在 assets 文件夹中添加您的图像，输入路径为“assets/imagePath”。示例 - 。检查拼写、文件扩展名。
欢迎 :-)....

标签： html angular typescript angular6 angular7

【解决方案1】：

将Images文件夹放入assets文件夹并给出路径。

【讨论】：

【解决方案2】：

我遇到了类似的问题并且是新手，这是我的第一反应，所以希望我没有在这里违反任何规则。

我对图像问题的建议

确保所有路径和链接大小写匹配，即“图像”文件夹与“图像”文件夹不同
在“angular.json”和“component.html”中匹配“assets”小“A”很重要
在资产前添加 /

希望这对某人有所帮助！

祝你好运

【讨论】：