生产环境JS动态加载图片失效，HTML静态引入正常求助

核心原因 #

本地开发时，动态拼接的图片路径直接指向原始文件，浏览器能正常读取；但生产构建时，打包工具（如Vite/Webpack）会对静态资源重命名（添加哈希后缀，比如avatar.abc123.png），而你用字符串拼接的动态路径不会被打包工具解析，导致部署后找不到对应文件名的资源。

具体修复步骤 #

1. 替换动态路径拼接方式
   把JS中直接拼接路径的代码，改成打包工具支持的动态资源解析语法。以Vite为例，用new URL()生成正确的资源路径：

   // 原问题代码示例
   // img.src = `./assets/${avatarName}.png`;
   
   // 修改后的代码
   const imgUrl = new URL(`./assets/${avatarName}.png`, import.meta.url).href;
   img.src = imgUrl;
   

   这种写法会让打包工具识别到动态资源引用，自动处理哈希命名和路径映射。

2. 确认打包配置的资源处理规则
   检查项目的打包配置文件（如vite.config.js或webpack.config.js），确保图片资源被正确纳入打包范围：

   • Vite默认处理assets目录下的资源，无需额外配置；若自定义了资源目录，需在配置中声明。
   • Webpack需确保url-loader或asset-module配置正确，匹配.png/.jpg等图片后缀。

3. 验证生产构建后的资源路径
   执行生产构建后，查看输出目录（如dist）里的图片文件名，确认是否带有哈希后缀；同时检查打包后的JS文件，确认动态生成的图片路径是否指向正确的哈希文件名。

内容的提问来源于stack exchange，提问作者Yasir Khan