caching - 引用 Phoenix 中正确的静态文件

Question

在 Phoenix 项目中，我可以在 css 文件中引用消化的 img :

background-image: url("/images/phoenix.png");

并且引用了:

http://localhost:4000/images/phoenix-5bd99a0d17dd41bc9d9bf6840abcc089.png?vsn=d

我想引用同一个文件，但图像 src添加了 javascript，如下所示:

document.querySelector('#my-img').src = '/images/phoenix.png';

但这仅引用:

http://localhost:4000/images/phoenix.png

如何配置 phoenix 端点以提供消化后的 img 文件？

(我希望此功能用于更新缓存文件)

Answer 1

由于您事先知道图像文件，因此您可以拥有一个 javascript 变量并将值设置为该图像文件的 URL，然后在您的脚本中使用它

在您的 .eex 模板中是这样的:

<script>
 // using static_path(@conn, "/path/to/asset") will give the digested file url
 var disgestedImageUrl ="<%= static_path(@conn, "/images/phoenix.png") %>";
</script>

然后让脚本使用 .js 文件中的 URL

<script>
  document.querySelector('#my-img').src = digesterImageUrl;
</script>