Angular で画像を表示してみました。

記事を投稿する前にいろんな方の記事も参考にさせて頂いて勉強させてもらっています。ただ、画像を表示するという場面でも、いろんな方の記事を参照させてもらいましたが、なかなかうまくできませんでした。

原因は画像ファイルの格納先についてよくわかっていなかったことでした。
デフォルトプロジェクトの angular.json の設定に合わせて画像を表示できるようにしました。

こういうところ、独学では厳しいです。
とはいうものの、前向きにいきましょう。

１．画像ファイルの格納先を確認します。

１－１．画像ファイルの格納先の設定を確認します。

・以下のファイルを参照します。
C:\Users\user\Angular\monotoneboy\angular.json

（アウトプット）

１－２．favicon.ico を設定します。

・以下のディレクトリに favicon.ico を設定します。
C:\Users\user\Angular\monotoneboy\public

元々、Angular の favicon.ico が設定されています。
私の作成した favicon.ico に置き換えています。

（アウトプット）

２．画像を表示します。

２－１．画像を設定します。

・以下のディレクトリに画像を設定します。
C:\Users\user\Angular\monotoneboy\public
MONOTONEBOY.png

（アウトプット）

３．プログラムを更新します。

３－１．component.ts に <img> タグで画像を設定します。

・template: に以下を設定します。
<img src="MONOTONEBOY.png">

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

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [],
template: `
+  <img src="MONOTONEBOY.png">
`
})
export class HeaderComponent {

}

（アウトプット）

html や css をもっと勉強して自由に使えたら、もっと楽しくなりそうです。
無事に思ったとおりになりました。