Angular 18画像の静的リソース読み込み問題

クズども · 掲載地 2024/07/23 8:47:59

要件:Angular-CLIを使ってv18プロジェクトを作成し、src/assetsフォルダを手動で作成し、画像を入れましたがアクセスできず、404エラーを報告しました。

ファイルパス:SRC/資産/test.png
IMGコード:<img src="assets/test.png">

オンライン検索の結果、v18版のファイル構造が変更されており、以下の図に示されています。

D:\360Downloads>tree ng17
ボリュームデータのフォルダPATHリスト
巻のシリアル番号はAA1B-3F2Fです
D:\360DOWNLOADS\NG17
├─.vscode
└─src
├─app
└─資産

D:\360Downloads>tree ng18
ボリュームデータのフォルダPATHリスト
巻のシリアル番号はAA1B-3F2Fです
D:\360DOWNLOADS\NG18
├─.vscode
├─パブリック
└─src
└─app

それぞれAngular CLI: 18.1.1、Angular CLI: 17.3.8を使って再作成し、コマンドは以下の通りです:

ログインが見えます。

v18版にはassetsフォルダがなくなり、publicフォルダが残っていることがわかりました。

解決

assetsフォルダをpublicフォルダにクリップします。

参考：

ハイパーリンクのログインが見えます。
ハイパーリンクのログインが見えます。

[角] Angular 18画像の静的リソース読み込み問題

関連記事

閲覧したセクション