React(jsx)中 require(''xx.png) 报错 Cannot find module './xx.png' 或 img src '[object Module]'

本文链接：https://blog.youkuaiyun.com/m0_37148591/article/details/105204775

在React应用中，使用jsx语法时，如果通过require引用图片可能会遇到'Cannot find module'的错误。错误产生的原因是url-loader默认使用esModule语法，而require是CommonJS语法。解决方法是在url-loader配置中将option.esModule设置为false。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

日常积累，欢迎指正

正文

error

react(jsx)中 require(''xx.png) 报错 Cannot find module './xx.png' 或 img src '[object Module]'

解决办法

配置上设置 url-loader 的 option.esModule = false 即可，我的完整配置:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|webp)$/,
        use: [{
          loader: "url-loader",
          options: {
            limit: 10 * 1024,
            name: 'static/images/[hash:6].[ext]',
            fallback: 'file-loader',
            publicPath: '../',
            esModule: false,  // 新添加
          }
        }]
      }
}

使用 - 注意正确写法与错误写法的细节区别

import React from 'react'

const imgPathPrefix = './images/'
const img = 'xx'
const imgFullPath = './images/xx.png'
const Com = (props) => {
    return (
            <div className = ''>
              <img src={require(`${imgPathPrefix}${img }.png`)} alt='title' />
              // <img src={require(imgFullPath )} alt='title' />
            </div>
    )
}

export default Com

注意写法

{/*正确*/}
   <img src={require(`${imgPathPrefix}${img }.png`)} alt='title' />

{/*错误*/}
   <img src={require(imgFullPath)} alt='title' />
   
{/*正确*/}
<img src={require(`${imgFullPath}`)} alt='title' />

{/*正确*/}
<img src={require('./images/xx.png')} alt={item.title} />