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

Question

I am doing a click cat game, and when I put the path of the image of the cat in the component's template using img, the image does not appear when running the page.

I tried to use the img as property using [img]="path", and also enter the path directly to the img element

Template:

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

Typescript

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

Answer 1

Everything's fine with your code.

Just move your image folder from

/src/app/image

to

/src/assets

directory & do change the src in

app.component.html