You may need an appropriate loader to handle this file type, currently no loaders are configured to

You may need an appropriate loader to handle this file type, currently no loaders are configured to_第1张图片

这是我在react项目中引入本地图片路径时候的报错

解决方法

1. npm i url-loader --save-dev ,安装成功会在package里面找到url-loader

2. webpack.config.js

添加以下代码

You may need an appropriate loader to handle this file type, currently no loaders are configured to_第2张图片

以防不知道加在什么位置,下面是我整个module里面的设置

module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
        options: {
          babelrc: true,
          cacheDirectory: true,
        }
      }]
    }, {
      test: /\.(sass|scss)$/,
      use: [{
        // 开发模式下不分离,可以实现样式热更新
        loader: DEV ? 'style-loader' : MiniCssExtractPlugin.loader,
      }, {
        loader: 'css-loader',
        options: {
          url: false,
          modules: {
            mode: 'global',
            localIdentName: '[local]-[hash:base64:5]',
          }
        }
      }, {
        loader: 'postcss-loader',
        options: {
          plugins: [
            autoprefixer({ overrideBrowserslist: browserConfig })
          ]
        }
      }, {
        loader: 'sass-loader'
      }],
    }, {
      test: /\.css$/, loader: 'style-loader!css-loader'
    }, {
      test: /\.(jpg|png|jpeg|gif)$/, loader: 'url-loader'
    }]
  },

3.图片引入

import expressImg from '$src/static/images/express.png';

你可能感兴趣的:(React)