如何配置Phoenix端点使JS引用的图片指向带摘要的静态文件？

这是Phoenix静态资源指纹（fingerprint）机制下的典型问题——CSS里的路径会在构建时被自动替换为带哈希的版本，但JS中的字符串路径因为是运行时解析，没法被构建工具自动处理。下面给你几种可靠的解决方案：

方法1：通过模板注入静态资源路径 #

利用Phoenix的路由助手Routes.static_path/2在模板中生成带哈希的正确路径，然后暴露给JS使用：

1. 在你的EEx模板（比如lib/your_app_web/templates/layout/app.html.eex）中，添加一个全局变量：

<script>
  window.assetPaths = {
    phoenixImage: "<%= Routes.static_path(@conn, "/images/phoenix.png") %>"
  };
</script>

2. 在JS文件中直接使用这个全局变量：

document.querySelector('#my-img').src = window.assetPaths.phoenixImage;

这种方法的好处是完全利用Phoenix自带的工具，不需要额外配置打包工具，适合简单场景。

方法2：通过前端打包工具处理资源导入 #

如果你使用ESBuild（Phoenix默认）、Webpack这类打包工具，可以直接在JS中导入图片资源，打包工具会自动处理指纹并生成正确的路径：

1. 在JS文件中导入图片：

import phoenixImg from "../images/phoenix.png";

// 给图片设置src
document.querySelector('#my-img').src = phoenixImg;

2. 确保你的打包配置正确处理静态资源：
   • 对于ESBuild，Phoenix默认的配置已经会把assets/images下的文件复制到priv/static/images，并在mix phx.digest时生成指纹。你只需要确保运行过mix phx.digest（生产环境部署时会自动执行）。

这种方法更符合现代前端开发流程，适合复杂的前端项目。

方法3：配置端点自动重定向（不推荐） #

你可以让Phoenix端点在收到不带哈希的静态资源请求时，自动重定向到带哈希的版本。修改lib/your_app_web/endpoint.ex中的Plug.Static配置：

plug Plug.Static,
  at: "/",
  from: :your_app,
  gzip: true,
  only: ~w(assets fonts images favicon.ico robots.txt),
  redirect_on_missing_fingerprint: true

然后运行mix phx.digest生成指纹和缓存清单。这样当你请求/images/phoenix.png时，服务器会返回302重定向到带哈希的版本。

不过这种方法不推荐，因为重定向会增加一次HTTP请求，而且缓存策略可能会出问题，不如前两种方法直接。

注意事项 #

• 开发环境测试：默认情况下Phoenix开发环境不启用指纹，如果你想在开发中测试带哈希的路径，需要修改config/dev.exs：

config :your_app, YourAppWeb.Endpoint,
  cache_static_manifest: "priv/static/cache_manifest.json"

然后运行mix phx.digest生成缓存清单，再重启服务器。

• 生产环境：部署时mix phx.digest会自动执行，生成带指纹的静态文件和缓存清单，所以只要你的代码正确使用上述方法，就能正常获取带哈希的资源。

内容的提问来源于stack exchange，提问作者Sam Houston