Angular 7 组件在 html 上显示图像的问题。为什么图片不显示？答案

【问题标题】：Angular 7 problem with component to show image on html. Why isn't the image showing?Angular 7 组件在 html 上显示图像的问题。为什么图片不显示？
【发布时间】：2020-11-22 02:05:14
【问题描述】：

我在做一个点击猫游戏，当我用img把猫图片的路径放到组件的模板中时，运行页面时图片没有出现。

我尝试使用 [img]="path" 将 img 作为属性，并直接输入到 img 元素的路径

模板：

<div>{{catName1}}</div>
<div>
    <img src="./image/cat.jpg" (click)="clickUp()">
</div>
<div>{{catClick1}}</div>
</div>

打字稿

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {

  catName1 = 'Misho';
  catImg1 = 'image/cat.jpg';
  catClick1 = 0;

  clickUp(){
    this.catClick1 += 1;
  }

}

How it is showing

Folder of the image

【问题讨论】：

你的图片文件夹在哪里？你能给你的文件夹拍照吗？
我添加了图片，见上。
查看此链接https://stackoverflow.com/questions/45920722/images-not-loading-in-angular-2
图片应该放在assets，图片来源应该是assets/image/cat.jpg。你不希望你的app文件夹中的图像。
好的，谢谢，我会试试的

标签： html angular image typescript angular6

【解决方案1】：

您的代码一切正常。

只需将图片文件夹从

/src/app/image

到

/src/assets

目录并更改src in

app.component.html

【讨论】：