2017-03-01 22 views
0

ember-cli-build.jsで宣言された静的ファイルであるEmberアプリケーションにいくつかの画像があります。プロダクションEmberアプリケーションで画像のsrcを設定する変数はどのように使用できますか?

アプリをプロダクションで使用すると、画像の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を設定するには、どのように変数を使用できますか?

答えて

3

これは、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を使用するメリットはありません。

+0

2番目の段落では、どのようなJSファイルについて話していますか?そこに静的URLを置くのはなぜ悪い考えですか? –

+0

どうすればそのassetMap.jsonファイルにアクセスできますか? –

+0

問題について[いくつかの有用な情報](https://github.com/rickharrison/broccoli-asset-rev/issues/24)があります – chekmare

関連する問題