React+Node应用页面刷新时部分图片加载失败问题求助

问题根源 #

你当前的问题出在两个核心点：

1. 同步判断异步加载的图片状态：checkImg里创建Image实例后直接判断img.complete，但图片加载是异步过程，此时图片还未完成加载，img.complete大概率为false，导致错误显示占位图；刷新时部分图片加载快、部分慢，就出现了随机失败的情况。
2. 动态require的不可靠性：React项目中src/assets下的资源会被Webpack编译处理，动态拼接路径的require在开发环境下可能因模块加载顺序、热更新机制等问题，偶尔出现找不到资源的情况，引发渲染异常。

另外，直接用require不做判断时，一旦图片被删除，require会抛出模块找不到的错误，导致应用崩溃，这也是需要规避的风险。

最优解决方案：改用public目录存上传图片 + onError事件处理 #

步骤1：调整图片存储路径

把用户上传的图片从src/assets/uploaded_imgs移到项目根目录的public/uploaded_imgs文件夹下（无此文件夹则新建）。后端Multer的存储配置也要对应修改，确保上传的图片存到这个位置。数据库中存储的图片路径改为相对public的路径，比如uploaded_imgs/xxx.jpg。

步骤2：修改组件渲染逻辑

去掉checkImg函数，直接利用img的onError事件处理加载失败的情况：

const list = items.map((item) => {
  const imgSrc = `/${item.img_url}`;
  return (
    <div key={item.id}>
      {/* 其他元素 */}
      <img 
        src={imgSrc} 
        alt="img cover"
        onError={(e) => {
          // 加载失败时替换为占位图
          e.target.src = '/imageUnavailable.png';
          e.target.alt = 'Not provided';
        }}
      />
      {/* 其他元素 */}
    </div>
  );
});

为什么这样有效？

• public目录下的资源不会被Webpack编译，直接通过URL访问，不存在动态require的加载问题；
• onError是浏览器原生事件，只有当图片确实加载失败（比如文件不存在、路径错误）时才会触发，判断准确，不会出现随机错误；
• 完全避免了require抛出异常导致应用崩溃的情况，也不需要同步判断图片状态。

备选方案：保留src/assets时的改进 #

如果必须把上传图片放在src/assets下，可以用try-catch包裹require，同时注意Webpack的导出规则：

const getImageSrc = (imgUrl) => {
  try {
    // Webpack编译静态资源后会导出default属性
    return require(`../../${imgUrl}`).default;
  } catch (error) {
    return '/imageUnavailable.png';
  }
};

// 组件中使用
const list = items.map((item) => (
  <div key={item.id}>
    {/* 其他元素 */}
    <img src={getImageSrc(item.img_url)} alt="img cover" />
    {/* 其他元素 */}
  </div>
));

注意：这种方式仅适合开发环境，生产环境下Webpack会把src/assets的资源重命名为带哈希的文件名，动态路径的require可能无法匹配到正确的资源，因此不推荐用于用户上传的图片（这类属于动态生成的资源，不属于编译时静态资源）。

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