如何使用变量在生产Ember应用程序中设置图像的src？

Question

我的Ember应用程序中有一些图像是在ember-cli-build.js中声明的静态文件。

在制作中使用该应用时，图片的网址将从/icons/icon.png更改为/icons/icon-9ace8daf640d474c5472a54df98a4299.png。所以这个：

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

变为：

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

怎么不知道为什么会这样（浏览器缓存？）。这会破坏我的图像，其中src来自变量。例如：

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

如果imgURL等于/icons/icon.png，那么浏览器将处理<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没有任何好处。