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

问题描述

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

<块引用>

test.component.ts

import { Component, OnInit } from '@angular/core';@成分({选择器:'测试应用'，templateUrl: './test.component.html'})导出类 TestComponent 实现 OnInit {image1='/img1.png';image2='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCNTJ-wSPyf8KvKYO-SKhfWi6EkpfgpaBYpcmWlpcyiHhXhzCvBw';构造函数(){}ngOnInit() {}}

<块引用>

test.component.html

<img class="mx-auto d-block" [src]="image2" alt="Image 2">

进入页面时出错

无法获取/img1.png

解决方案

将 Images 文件夹放在 assets 文件夹中并给出路径.

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

Error coming on the page

Cannot GET /img1.png

解决方案

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

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