在 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