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

最新推荐文章于 2024-05-10 13:13:32 发布

SarinaDu

最新推荐文章于 2024-05-10 13:13:32 发布

阅读量3.4k

点赞数

分类专栏： react webpack commonJS

本文链接：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'