プロダクションEmberアプリケーションで画像のsrcを設定する変数はどのように使用できますか？

Question

ember-cli-build.jsで宣言された静的ファイルであるEmberアプリケーションにいくつかの画像があります。

アプリをプロダクションで使用すると、画像のURLは/icons/icon.pngから/icons/icon-9ace8daf640d474c5472a54df98a4299.pngに変わります。だから、この：

<img src="/icons/icon.png"> 

は次のようになります。

<img src="/icons/icon-9ace8daf640d474c5472a54df98a4299.png"> 

どのようにこれがなぜ起こるかわかりません（ブラウザのキャッシュを？）。これは、srcが変数から来たところで私のイメージを破壊します。たとえば：imgURLは/icons/icon.pngに等しい場合

<img src="{{imgURL}}"> 

は、ブラウザは<img src="/icons/icon.png">に対処され、URLが何につながるため、要求は失敗します。開発では、すべてが期待通りに機能します。

プロダクションEmberアプリケーションで画像のsrcを設定するには、どのように変数を使用できますか？

Answer 1

これは、broccoli-asset-revという既定でember-cliで使用されているために発生します。

まず、.jsファイル内の画像への静的なURLを持つのは良い考えではありません。それは、テンプレート内に保持するほうがより良い解決策です。

しかし、あなたの質問に答えるには、複数の解決策があります。

1. broccoli-asset-revを一切使用しないでください。このためにはpackage.jsonから削除してください。ファイルの名前が変更されることはありません。
2. .jsからexcludeアレイに使用する画像を追加します。
3. 生成されたassetMap.jsonを使用して、新しいファイル名を取得します。

broccoli-asset-revが役立つ理由を理解する必要があります。

基本的な考え方は、お客様のindex.html以外のファイルをクライアントやプロキシに永久にキャッシュし、各バージョンに一意のURLを使用することだけです。ただし、サーバーがExpiresヘッダーを送信していない場合は、broccoli-asset-revを使用するメリットはありません。