Использование изображений с Webpack не работает

Question

У меня есть проект, который использует webpack и реагирует. Я использую file-loader / url-loader для использования изображений с настройкой webpack / реагировать. В моем реактивном проекте я делаю import Img from '/image/source/image.jpg', но если затем попробуйте <img src={Img}>, то src - это код base64, который говорит module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg";, и изображение не отображается. Как я могу это исправить?

webpack.config.js

var webpack = require( 'webpack' )
var path = require( 'path' )

var BUILD_DIR = path.resolve( __dirname, 'src/client/public' );
var APP_DIR = path.resolve( __dirname, 'src/client/App' );

var config = {
  mode : 'development',
  entry : APP_DIR + '/index.jsx',
  output : {
    path : BUILD_DIR,
    filename : 'bundle.js'
  },

  devServer : {
    publicPath : '/',
    contentBase : './src/client'
  },

  module : {
    rules : [
      {
        test : /\.jsx|js?/,
        include : APP_DIR,
        exclude : /(node_modules)/,
        loader : 'babel-loader',
        query : {
          presets : [ 'env', 'react' ]
        }
      },

      {
        test : /\.scss|.css$/,
        loaders : [ 'style-loader', 'css-loader', 'sass-loader' ]
      },

      {
        test : /\.(png|jp(e*)g|svg)$/,
        use : [{
          loader : 'url-loader',
          options : {
            limit : 8000,
            name : 'images/[hash]-[name].[ext]'
          }
        }]
      },

      {
        test : /\.(png|jp(e*)g|svg)$/,
        use : {
          loader: "file-loader",
          options: {
            name: "images/[name].[hash].[ext]"
          }
        }
      }
    ]
  }
};

module.exports = config;

Answer 1

Я предлагаю удалить загрузчик файлов в вашем webpack.config.js и использовать только url-загрузчик, так как оба плагина работают одинаково. Насколько я понимаю, Webpack теперь обрабатывает ваши файлы изображений, используя оба загрузчика, поскольку вы указываете, что оба загрузчика должны запускаться следующим образом.
test : /\.(png|jp(e*)g|svg)$/,

Поскольку изображения проходят через оба загрузчика, вероятно, именно поэтому вы видите module.exports = __webpack_public_path__ + "images/code.61e3a3939c2f93f30ac21419625c9a4f.jpg"; для вашего источника изображения.

Вот что документы веб-пакета говорят о загрузчике URL.

url-loader работает как file-loader, но может вернуть DataURL, если размер файла меньше предела байтов.

Кроме того, вы указываете веб-пакету использовать разные имена файлов для тех же расширений, что также может создать проблему.
url-загрузчик> name : 'images/[hash]-[name].[ext]'
загрузчик файлов> name: "images/[name].[hash].[ext]"

Я загрузил это GitHub репо , которое вы можете проверить. Он загружает изображения, как вы предлагаете. Отрегулируйте настройку limit в url-загрузчике и проверьте источник, чтобы увидеть изменение URL-адреса с изображения в кодировке base64 на URL.