Gatsby项目中React组件循环渲染图片报[object Module]404错误如何解决

问题原因 #

你遇到的[object Module] 404报错是因为Gatsby内置的webpack构建工具默认开启了静态资源的ES模块导出规则，此时通过require()引入图片时，返回值是一个包裹了资源路径的模块对象，而非直接返回图片的可访问路径，实际路径存储在该模块对象的default属性中。

解决方法 #

方案1：直接取模块的default属性 #

修改img标签的src取值，追加.default即可，修改后的代码如下：

const ServiceCard = ({ title, subtitle, text, logos }) => {
    const displayLogos = logos.split(",").map((logo) => (
        <li key={logo} className="tech-logo">
            <img
                key={logo}
                src={require(`../../images/tech-logos/${logo}.png`).default}
                alt={`${logo} logo`}
                height="30px"
                width="30px"
            />
        </li>
    ));

    return (
        <div className="service-card">
            <h1 className="service-card-title">{title}</h1>
            <h2 className="service-card-subtitle">{subtitle}</h2>
            <p className="service-card-text">{text}</p>
            <ul className="tech-logo-list">{displayLogos}</ul>
        </div>
    );
};

方案2：全局关闭静态资源的ES模块导出 #

如果不想每次引入图片都加.default，可以在项目根目录的gatsby-node.js中修改webpack配置，关闭图片资源的esModule选项：

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'static/images/[name].[hash][ext]',
          },
          parser: {
            dataUrlCondition: {
              maxSize: 8 * 1024,
            },
          },
          esModule: false,
        },
      ],
    },
  })
}

修改后重启开发服务，原来的require()写法就可以直接返回图片路径。

方案3：使用static目录托管静态资源 #

你也可以把tech-logos文件夹整体移动到项目根目录的static目录下，此时不需要使用require引入，直接写绝对路径即可：

<img
  key={logo}
  src={`/tech-logos/${logo}.png`}
  alt={`${logo} logo`}
  height="30px"
  width="30px"
/>

注意事项 #

Gatsby对文件名大小写敏感，请确保传入的logo字符串和实际的png文件名大小写完全匹配，比如传入React对应文件名必须为React.png，否则仍会触发404报错。

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