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

Question

我在做一个点击猫游戏，当我使用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;
  }

} 

它是如何显示的

图片的文件夹

Answer 1

您的代码一切正常。

只需将您的图像文件夹从

/src/app/image

到

/src/assets

目录并更改src

应用程序组件.html