Javascript 不使用Webpack+React渲染大型图像？

我正在尝试使用Webpack将图像文件夹中的图像渲染到React项目中。我注意到，对于较小的照片，即物理上较小的尺寸，我认为这意味着较小的文件大小，照片会加载。但是，对于较大的照片，除了此处显示的占位符，屏幕上不会显示任何内容

我怀疑这可能是由于不正确的网页配置。照片导入和渲染本身正在工作，因为较小的照片会进行渲染。具体来说，我怀疑这可能是Webpack中的file loader子句的问题

以下是我的网页设置：

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

您的url加载器限制为100k字节或其他内容：limit=100000尝试删除该内容。

您的url加载器限制为100k字节或其他内容：limit=100000尝试删除该内容。

在您的网页包配置中，您已经定义了两次模块对象

因此，您的第二个模块配置将覆盖第一个模块配置。因为在第二个模块中并没有提到文件加载器，所以一旦url加载器限制超过100000，文件将不会被解析

此外，不建议将url加载程序用于较大的文件

改为修改你的网页配置，包括url和文件加载器

像这样：

模块：{ 规则：[{ 测试：/.jsx？$/,， 加载器：“巴别塔加载器”， 排除：/node\u模块/ }, { 测试：/\.css$/,， 加载器：样式加载器！css加载器 }, { 测试：/\.png | svg | jpg | gif$/,， 使用：“文件加载器” }, { 测试：/\.jpe？g | jpg | png | gif | woff | woff2 | eot | ttf | svg\？[a-z0-9=.]+？$/， 加载器：“url加载器？限制为100000” }] }

---

在webpack配置中，您已经定义了两次模块对象

因此，您的第二个模块配置将覆盖第一个模块配置。因为在第二个模块中并没有提到文件加载器，所以一旦url加载器限制超过100000，文件将不会被解析

此外，不建议将url加载程序用于较大的文件

改为修改你的网页配置，包括url和文件加载器

像这样：

模块：{ 规则：[{ 测试：/.jsx？$/,， 加载器：“巴别塔加载器”， 排除：/node\u模块/ }, { 测试：/\.css$/,， 加载器：样式加载器！css加载器 }, { 测试：/\.png | svg | jpg | gif$/,， 使用：“文件加载器” }, { 测试：/\.jpe？g | jpg | png | gif | woff | woff2 | eot | ttf | svg\？[a-z0-9=.]+？$/， 加载器：“url加载器？限制为100000” }] }