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

最新推荐文章于 2025-03-31 15:12:26 发布

Little_Pig_Bug

最新推荐文章于 2025-03-31 15:12:26 发布

阅读量5.2k

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/Little_Pig_Bug/article/details/103610559

版权

React 专栏收录该内容

12 篇文章

订阅专栏

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

解决方法

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

2. webpack.config.js

添加以下代码

以防不知道加在什么位置，下面是我整个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';