이미지: 이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다.

이미지: 이 파일 형식을 처리하려면 적절한 로더가 필요할 수 있습니다.

React에서 이미지를 로드하는 데 적합한 로더가 무엇인지 알 수 없습니다.JS 웹 팩,

좀 도와주시겠어요?다음의 에러가 표시됩니다.

Module parse failed: /Users/imac/Desktop/fakeeh/imgs/logo.png Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

Web pack 설정은 다음과 같습니다.

const path = require('path');


module.exports = {
  // the entry file for the bundle
  entry: path.join(__dirname, '/client/src/app.jsx'),

  // the bundle file we will get in the result
  output: {
    path: path.join(__dirname, '/client/dist/js'),
    filename: 'app.js',
  },

  module: {

    // apply loaders to files that meet given conditions
    loaders: [{
      test: /\.jsx?$/,
      include: path.join(__dirname, '/client/src'),
      loader: 'babel-loader',
      query: {
        presets: ["react", "es2015", "stage-1"]
      }
    }],
  },

  // start Webpack in a watch mode, so Webpack will rebuild the bundle on changes
  watch: true
};

감사합니다!!

저도 이 문제에 직면하여 해결 방법을 찾았습니다.

먼저 2개의 로더(file-loader, url-loader)를 설치해야 합니다(예: $npm install --save file-loader url-loader).

css를 지원하는 경우.style loader를 설치했는지 확인합니다(예: $npm install --save style-loader css-loader).

그런 다음 웹 팩 구성을 업데이트하십시오. 아래 샘플 구성을 확인하십시오.도움이 됐으면 좋겠다.

  module: {
    loaders: [{
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
      loader: 'url-loader?limit=100000' }]
  },

파일 로더를 사용할 수 있습니다.먼저 npm을 사용하여 설치한 후 웹 팩 구성을 다음과 같이 편집해야 합니다.

module: {

    // apply loaders to files that meet given conditions
    loaders: [{
      test: /\.jsx?$/,
      include: path.join(__dirname, '/client/src'),
      loader: 'babel-loader',
      query: {
        presets: ["react", "es2015", "stage-1"]
      }
    },
    {
      test: /\.(gif|svg|jpg|png)$/,
      loader: "file-loader",
    }],
  },

웹팩 3에서는url-loader다음과 같습니다.

인스톨:

npm install --save url-loader

그런 다음 웹 팩 구성에서 다음을 수행합니다.

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

마지막으로 코드:

<img src={require('./path/to/image.png')} />

이 두 단계는 나에게 효과가 있었다

애셋 리소스 로더("webpack": "^5.70.0")

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js',
    assetModuleFilename: '[name][ext]',      // (2)
  },
  resolve: {
    extensions: ['.jsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,       // (1)
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

경우에 따라서는, 보다 심플하고, 눈앞에 있는 솔루션도 있습니다.

저는 바로 이 문제에 대해 구글 검색을 시작했습니다.하지만 나는 시험에서 jpg 확장자를 놓쳤다.

그래서.. 내 시험은..

test: /.(png|woff(2)?|eot|ttf|svg|gif|jpe?g)(\?[a-z0-9=\.]+)?$/

include 속성이 정의되어 있는 경우 이미지가 포함된 폴더의 경로가 포함되어 있는지 확인합니다.저는 그게 문제였어요.

{
    test: /\.(png|jpg|ttf|eot|svg|woff(2)?)(\S+)?$/,
    include: [/react-notifications/, /goodtables-ui/, /@mdi\/font/, /clear-ui/],
    use: ['file-loader']
}

언급URL : https://stackoverflow.com/questions/45848055/image-you-may-need-an-appropriate-loader-to-handle-this-file-type