React组件图片渲染异常：src显示[object Module]求助

这个问题我之前也碰到过，根源在于webpack资源加载器的模块输出格式设置——现在默认是ES模块，而不是传统的CommonJS，所以require()返回的是一个模块对象，而不是直接的图片URL，这就是你看到[object Module]的原因。给你几个可行的解决办法：

方法1：修改require调用，获取default属性 #

最简单的解决方式就是在require之后加上.default，因为ES模块的默认导出会放在模块对象的default属性里：

<div className='image'>
  <img src={require(`../img/${details.image}`).default} alt={details.name} />
  {console.log(details.image)}
</div>

这个改动很小，马上就能生效，适合快速解决问题。

方法2：修改webpack配置，强制使用CommonJS模块 #

如果你不想每次都写.default，可以调整webpack的配置，让资源加载器输出CommonJS格式的模块：

针对Webpack 5（Asset Modules） #

在webpack.config.js里添加或修改相关规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name][ext]' // 保持和你现有输出路径一致
        }
      }
    ]
  },
  // 关键配置：禁用ES模块输出
  experiments: {
    outputModule: false
  }
};

针对Webpack 4及更早版本（使用file-loader/url-loader） #

在loader配置里添加esModule: false：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false, // 强制使用CommonJS
              name: 'img/[name][ext]'
            }
          }
        ]
      }
    ]
  }
};

修改完配置后重启webpack服务，原来的require代码就能正常工作了。

方法3：使用动态import（ES模块方式） #

如果你更倾向于ES模块的写法，可以用动态import()来加载图片，不过这是异步操作，需要配合React的状态管理：

import { useState, useEffect } from 'react';

function YourComponent({ details }) {
  const [imageSrc, setImageSrc] = useState('');

  useEffect(() => {
    // 动态导入图片，获取default导出的URL
    import(`../img/${details.image}`).then(module => {
      setImageSrc(module.default);
    }).catch(err => {
      console.error('加载图片失败:', err);
    });
  }, [details.image]);

  return (
    <div className='image'>
      {/* 确保图片加载完成后再渲染 */}
      {imageSrc && <img src={imageSrc} alt={details.name} />}
      {console.log(details.image)}
    </div>
  );
}

这种方式更符合现代ES模块的规范，适合大型项目长期维护。

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