css - 在 reactJs 中加载 .jpn 图像

Question

我刚刚使用 style-loader 和 css-loader 配置了我的元素 -

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['babel'],
        include: path.join(__dirname, 'scripts')
      },{
            test: /\.css$/,
            loaders: [ 'style-loader', 'css-loader' ]
        }
    ]
  }

效果很好，但后来我的 .jpn 图像遇到了问题。

ERROR in ./scripts/radio.jpg Module parse failed: C:\Users\barak\WebstormProjects\FinalProjectRadioStream\scripts\radioo.jpg Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type.

关于图像加载器有什么建议吗？在 react 和 webpack 中使用 css 文件中的图像的一些简单方法？

谢谢。

Answer 1

我认为你正在使用 webpack。 您需要像这样配置图像加载器文件(使用“file-loader”):

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}  
          }
        ]
      }
    ]
  }
}

了解更多:https://webpack.js.org/loaders/file-loader/