Ошибка сборки при импорте изображений с реагированием - PullRequest
Новая
       5

Ошибка сборки при импорте изображений с реагированием

0 голосов
/ 11 февраля 2020

Я импортирую изображения, как показано ниже: 

import StepIcon from '../../public/images/icon_step.png'

, и это работает без проблем, но когда я запускаю сборку, я получаю сообщение об ошибке ниже, думаю, мне нужно исправить настройки веб-пакета, но я понятия не имею. как я могу решить эту проблему?

Ошибка 

 error  in ./public/images/icon_step.png

Module build failed (from ./node_modules/file-loader/dist/cjs.js):
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type function
    at Hash.update (internal/crypto/hash.js:64:11)
    at getHashDigest (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/getHashDigest.js:48:8)
    at url.replace (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/interpolateName.js:96:11)
    at String.replace (<anonymous>)
    at Object.interpolateName (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/loader-utils/lib/interpolateName.js:93:8)
    at Object.loader (/mnt/c/Users/wbvco/Desktop/Project Baby/styled-react-boilerplate/node_modules/file-loader/dist/index.js:27:36)

 @ ./src/components/signupstep.js 35:0-57 511:11-19
 @ ./src/pages/signup.js 
 @ ./src/app.js
 @ ./src/index.js
 @ multi react-hot-loader/patch ./src/index.js

Настройка веб-пакета 

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

1 Ответ

0 голосов
/ 11 февраля 2020

Я думаю, что это связано с проблемой относительного пути изображения. Можете ли вы попробовать следующие методы:

  1. Простой метод, которому вы должны следовать, см. здесь для получения дополнительной информации.

  2. Используя веб-пакет

Пожалуйста, обновите веб-пакет, как показано ниже 

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

Тогда вы можно импортировать изображения из папки publi c для реагирования компонента 

import image from '../../public/assets/images/logo.png'

<img src={image}/>

Используя метод require

Также вы можете попробовать это, установив url-loader и file-loader

npm установите url-loader file-loader --save-dev

Затем обновите конфигурацию веб-пакета как 

module: {
    loaders: [
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
    ]
}

и, наконец, 

<img src={require('./PATH_TO_IMAGE/IMAGE.png')}/>
...