Question

它不是从本地路径加载任何图像，而是从Internet加载图像。请帮助我从本地加载图像。我创建了一个包含项目本身内部图像的文件夹。

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

将图片文件夹放入 assets 文件夹中，并提供路径。

Answer 2

我遇到了类似的问题并且是新来的，这是我的第一反应，因此希望我不会违反任何规则。

我对图像问题的建议

确保匹配的所有路径和链接大小写，即“ image”文件夹与“ Image”文件夹不同
同时匹配“ angular.json”和“ component.html”中的“资产”小“ A”
在资产前添加/

希望这对某人有帮助！

祝你好运

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

2 个答案: