在react中img使用require无法引入图片

watch17
  • 16

在react中引入图片是使用import的方式引入是没有问题的,而使用require的方式引用,无法引入
image.png
image.png
打印出require('~/images/2.png')的结果是{"default":"2.edcea8.png"}
image.png
这是因为webpack没配置好还是因为引用方式错误
image.png

回复
阅读 4.6k
2 个回答

webpack打包html里面img后src为“[object Module]”问题

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包

后来发现file-loader在新版本中esModule默认为true,因此手动设置为false

  {
    
  test: /.(png|jpg|gif|jpeg)$/,
    
  use: [{
    
  loader: 'url-loader',
    
  // loader: 'file-loader',
    
  options: {
    
  esModule: false, // 这里设置为false
    
  name: '[name].[ext]',
    
  limit: 10240
    
  }
    
  }]
    
 }

esModule: false, // 这里设置为false

require('~/images/2.png').default 就好了

宣传栏