Большие изображения не отображаются с помощью Webpack + React?

Question

Я пытаюсь визуализировать изображение из папки с изображениями в проект React с помощью Webpack. Я замечаю, что для небольших фотографий (то есть физически меньших размеров, которые, я думаю, означает меньший размер файла), фотография загружается Тем не менее, для больших фотографий на экране ничего не отображается, кроме заполнителя, видимого здесь. 1

Я подозреваю, что это может быть связано с неправильной конфигурацией Webpack. Сам импорт и рендеринг фотографий работает, потому что меньшие фотографии делают рендеринг. В частности, я подозреваю, что это может быть проблема с предложением «file-loader» в Webpack.

Ниже приведены настройки Webpack:

const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const config = {
  entry: __dirname + '/imports/layouts/index.jsx',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
    publicPath: '/',
  },
  resolve: {
    extensions: [".js", ".jsx", ".css"]
  },

  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "styles.css",
      chunkFilename: "[id].css"
    })
  ],


  module: {
    rules: [{
        test: /\.jsx?/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it use publicPath in webpackOptions.output
              publicPath: '../'
            }
          },
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: 'file-loader'
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
  },

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


};

module.exports = config;

В случае, если это может быть полезно, ниже показано, как я отрисовываю изображение в React.

import photo from '../../images/sample_photo.jpg';

import './sample.css';

    export default class Sample extends Component {
      render () {
        return (
        <img src={photo}></img>
         )
     } }

Изображение сам по себе в браузере отображается как «24d565c81ae689a281aabb01ad3208db.jpg», а не «sample_photo.jpg» по какой-то причине.

Answer 1

В вашей конфигурации веб-пакета вы определили module объекты дважды.

Таким образом, ваша вторая module конфигурация переопределит первую. Поскольку file-loader не упоминается в вашем втором module, если ваш url-loader предел (100 000) превышает файл, не будет проанализирован.

Кроме того, url-loader не рекомендуется использовать для больших файлов.

Вместо этого измените конфигурацию вашего веб-пакета, включив в нее как URL, так и загрузчик файлов.

Как это:

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

Answer 2

У вас есть ограничение на загрузчик url ​​100 Кбайт или что-то вроде: limit=100000 Попробуйте удалить это.