Ember.js动态图片开发正常、部署构建后无法加载问题咨询

这问题我之前用Webpack处理静态资源时也踩过坑！核心原因很明确：你的构建工具（比如Webpack、Vite这类）为了做缓存优化，给图片文件自动加上了哈希后缀（就是你看到的{{imagename}}-{{someidentifier}}.png格式），但Handlebars模板里还在引用原始的{{iconname}}.png路径，部署后自然找不到对应的文件。

下面给你几个实用的解决方案，按推荐程度排序：

方案一：让构建工具自动解析模板里的图片引用（推荐） #

如果用Webpack这类工具，通过配置html-loader配合Handlebars loader，就能让构建过程自动识别模板中的图片路径，替换成带哈希的最终文件名。

示例Webpack配置： #

module.exports = {
  module: {
    rules: [
      // 处理Handlebars模板，先通过html-loader解析资源路径，再用handlebars-loader编译模板
      {
        test: /\.hbs$/,
        use: [
          'html-loader',
          {
            loader: 'handlebars-loader',
            options: {
              // 这里可以加你的Handlebars配置，比如partials路径等
            }
          }
        ]
      },
      // 处理图片资源，输出带哈希的文件名
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'image/draw-info/[name]-[contenthash][ext]'
        }
      }
    ]
  }
};

配置后，html-loader会扫描模板里的src属性，把{{iconname}}.png对应的实际文件替换成构建后的哈希文件名，同时Handlebars仍能正常渲染{{iconname}}变量，完美解决路径不匹配的问题。

方案二：用资源映射表+Handlebars Helper #

如果不想调整构建工具的核心配置，或者用的是其他小众构建工具，可以生成一个资源映射文件，记录原始文件名和哈希文件名的对应关系，再通过Handlebars Helper来动态获取正确路径。

步骤： #

1. 生成资源映射表：很多构建工具会默认生成asset-manifest.json（比如Webpack的webpack-manifest-plugin），或者你可以写个简单的脚本在构建后生成，内容大概是：

{
  "image/draw-info/icon1.png": "image/draw-info/icon1-abc123.png",
  "image/draw-info/icon2.png": "image/draw-info/icon2-def456.png"
}

2. 注册Handlebars Helper：

// 引入映射表
const assetManifest = require('./asset-manifest.json');

// 注册获取资源路径的helper
Handlebars.registerHelper('getImagePath', function(iconName) {
  const originalPath = `image/draw-info/${iconName}.png`;
  // 返回哈希后的路径，找不到则返回原始路径作为 fallback
  return assetManifest[originalPath] || originalPath;
});

3. 修改模板代码：

<img src="{{getImagePath iconname}}" alt="{{iconname}}">

方案三：禁用图片的哈希命名（不推荐） #

如果对缓存优化要求不高，或者只是临时解决问题，可以直接让构建工具输出不带哈希的图片文件名。比如在Webpack里修改图片的输出配置：

{
  test: /\.(png|jpe?g|gif)$/i,
  type: 'asset/resource',
  generator: {
    filename: 'image/draw-info/[name][ext]' // 去掉哈希后缀
  }
}

这个方法最简单，但缺点是失去了缓存优化的能力，用户每次更新图片后可能需要手动清缓存，不建议在生产环境长期使用。

额外提醒 #

开发环境正常是因为大部分构建工具在开发模式下不会给文件加哈希，只会在生产构建时启用这个优化，所以才会出现“开发正常、部署异常”的差异。

内容的提问来源于stack exchange，提问作者binod shrestha