assetsをCDNに置きたい

src/assets/images 配下に画像を置いて開発している場合、HTMLファイルからは

<img src="/assets/images/hoge.png">

のようにして画像を参照できます。
developmentではこのように参照してproductionでは画像をCDNに置きたい、という場合はどのようにdeployするのがよいでしょうか?
Railsのasset_hostのような設定ができればラッキーなのですが。

srcにフルのURLを指定すれば画像を表示できますが、この方法だと開発の時に不便そうだなと思いました。

<img src="https://assets.example.com/images/hoge.png">
3 Likes

ng buildの --deploy-url オプションを利用するとビルド時に静的ファイルの読み込み先を設定することができます。assets以下のものだけではなくて出力されるJavaScriptなども同じ場所に配置する前提になります。

その上で現在はHTMLに指定したassetsのパスを自動で調整する機能はないようです。

そのissueのコメントを見ると様々なWorkaroundがありますが、わたし個人としては次のコメントのように画像をimportする方法を利用しています。Webpackで管理されるので、ファイル名へのハッシュ追加が有効になるのがメリットです。

1 Likes

有用なissueをご紹介いただきありがとうございます。読ませていただきます。
また、nomeaning777さんが使っている方法もオススメいただきありがとうございます。大変参考になります。