无法从Angular 7中的本地路径加载图像 [英] Not loading image from local path in Angular 7

问题描述

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

It's not loading any image from local path, but loading images from internet. Please help me load images from local. I have created the folder containing images inside the project itself.

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 文件夹中并提供路径.

Put the Images folder in assets folder and give the path.

这篇关于无法从Angular 7中的本地路径加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！