assetsを使って環境ごとに画像を切り替える
画像を環境ごとに切り替えるのに使えたのが、angular.jsonのassetsオプションでした。
以下のように、angular.jsonで、書く環境のビルド設定の箇所に、以下のようにassetsの設定を入れます。
"staging": {
"assets": [
{
"glob": "**/*",
"input": "src/assets/staging",
"output": "/assets/"
}
],上記の内容としては、inputの「src/assets/staging」フォルダにあるファイルを、outputの[/assets/]フォルダにファイルをコピーすることになります。
なので、環境ごと使いたいファイルをinputに設定し、実際にコンポーネントなどで使うときは、outputで設定しているパスから参照することができるので、環境ごとに使い分けられます。
具体的な使う例を示すと、上記の設定の場合で、「src/assets/staging/image.png」の画像ファイルが、プロジェクトフォルダに設定されていたとしたら、テンプレートから参照するには、以下のように「assets/image.png」で画像を参照できます。
<img src="assets/image.png">
