使用Parcel构建项目时图片渲染失效问题求助

Parcel会对静态资源添加哈希后缀重命名以优化缓存，这直接导致你JSON中存储的原始图片路径和打包后的实际路径不一致，从而无法加载图片。下面是几种可行的解决办法：

方法1：手动导入图片并建立映射 #

只在JSON中存储图片的文件名，然后在JavaScript中导入对应图片，建立文件名到打包后路径的映射：

1. 修改JSON文件，仅保留图片文件名（例如 "image": "nyc.jpg"）
2. 在JS中导入需要的图片并创建映射表：

// 导入图片资源，Parcel会自动处理为打包后的正确路径
import nycImage from './images/nyc.jpg';
import laImage from './images/la.jpg';

// 建立文件名到实际路径的映射
const imagePathMap = {
  'nyc.jpg': nycImage,
  'la.jpg': laImage
};

3. 渲染时替换为映射后的路径：

async function getTimeZoneDetails(e) {
  const response = await fetch(endpoint + e.abbr);
  const data = await response.json();
  const zone = e.zone;
  const time = data.time;
  const dst = data.dstActive ? " - DST" : "";
  
  // 改用模板字符串拼接HTML，可读性更强
  const result = `
    <div class='card'>
      <img src='${imagePathMap[e.image]}' width='100%' />
      <div class='card_content'>
        <h2>${time}</h2>
        <h3>${zone}${dst}</h3>
        <h4>${e.states}</h4>
      </div>
    </div>
  `;
  
  document.getElementById(e.id).innerHTML = result;
  return data;
}

// 若需要按顺序处理异步请求，可改用for...of + await
for (const item of arr) {
  await getTimeZoneDetails(item);
}

方法2：批量导入图片（适合图片较多的场景） #

使用Parcel支持的require.context批量导入指定文件夹下的图片，自动生成映射表：

// 批量导入images文件夹下所有jpg格式的图片
const imageContext = require.context('./images', false, /\.jpg$/);
const imagePathMap = {};

// 遍历所有导入的图片，建立文件名到路径的映射
imageContext.keys().forEach(key => {
  // 提取文件名（去掉开头的./前缀）
  const fileName = key.replace('./', '');
  imagePathMap[fileName] = imageContext(key);
});

// 后续渲染逻辑和方法1一致，直接使用imagePathMap[e.image]即可

方法3：关闭Parcel的图片哈希重命名（不推荐） #

如果不需要缓存优化，可以配置Parcel关闭资源哈希重命名。在项目的package.json中修改build脚本：

{
  "scripts": {
    "build": "parcel build index.html --no-content-hash"
  }
}

这种方法会失去哈希带来的缓存更新优势，仅适合测试场景或对缓存无要求的项目，不建议在生产环境使用。

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