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

前言

日常积累，欢迎指正

正文

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} />
           

总之就是不能直接写路径变量

原因

• 1、 url-loader 默认使用 esmodule 语法， require() 为 common JS，使用 require 需要设置 urlLoader.esmodul 为 false
• 2、 require 运行时调用

require(imgFullPath)

require(

${imgFullPath}

)

正常执行，没有错误