Angularのimageでsrcで指定したパスの画像を表示させたいとき
今回はAngularのimageでsrcで指定したパスの画像を表示させたいときどのようにすれば良いのかについてご紹介していこうと思います。
Angularのバージョンは18.0.6です。
Angularのimageでsrcで指定したパスの画像を表示させたいとき
まず、基本的にAngularの画像の配置場所はsrcの下のassetsです。
例えば、「logo.png」という画像をプロジェクトに配置したい場合は、src/assets/logo.pngの場所となるでしょう。
assetsの下に配置したら、angular.jsonでassetsの下に「"src/assets"」のような定義が必要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "projects": { "my-angular-app": { "architect": { "build": { "options": { "assets": [ "src/favicon.ico", "src/assets" ], ... } }, ... } } } } |
これを画面上で表示させたい場合は、HTMLファイルに
|
1 |
<div><img alt="item" src="assets/logo.PNG"></div> |
のように書くことになるでしょう。
これで画面上で画像が表示されることが確認できると思います。
終わりに
今回はAngularのimageでsrcで指定したパスの画像を表示させたいときどのようにすれば良いのかについてご紹介いたしました。