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

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

Answer 1

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

Answer 2

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

我对图像问题的建议

确保所有路径和链接大小写匹配，即 "image" 文件夹不同于 "Image"
重要的是在 "angular.json" 和 "component.html"
在资产前加一个/

希望这对某人有所帮助！

祝你好运

未从 Angular 中的本地路径加载图像 7

Not loading image from local path in Angular 7

html

typescript

angular

angular6

angular7