图像未加载在反应性JS中

Question

我是新的反应JS世界，没有网页包图像加载正确，但当使用webpack图像不加载如果图像大小大于24*24像素。

如果图像大小小于(24*24像素)，则图像正在正常加载。

src/assets/Image/exportImage.jpg';下的图像我对此一无所知。

import exportImage from '../../assets/image/exportImage.png';
<img src={exportImage} id="ui-image"></img>

config-overrides.js

const name = '';
const publicPath = process.env.NODE_ENV === 'production' ? 'https://qiankun.umijs.org/' : 'http://localhost:3000/';
const {
    override,
    fixBabelImports,
    addLessLoader,
    overrideDevServer
} = require("customize-cra");
const path = require("path");

module.exports = override(
    fixBabelImports('import',{
        libraryName:'antd',
        libraryDirectory:'es',
        style:true
    }),
   addLessLoader({
       javascriptEnabled:true,
   })
);

module.exports = {
  webpack: function overide(config, env) {
      config.output.library = `${name}`;
      config.output.libraryTarget = 'umd';
      config.output.jsonpFunction = `webpackJsonp_${name}`;
      config.output.globalObject = 'window';
      return config;
  }
  ,
  devServer: function (configFunction) {
      return function (proxy, allowedHost) {
          const config = configFunction(proxy, allowedHost);
          config.open = false;
          config.hot = false;
          config.headers = {
              'Access-Control-Allow-Origin': '*',
          };
          return config;
      };
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|jpg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]',
              publicPath,
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[hash:8].[ext]',
              publicPath,
            },
          },
        ],
      },
    ],
  },
};

请帮助我，我怎样才能克服这个问题。

Answer 1

最后，我找到了解决方案，使用以下属性设置为大于图像大小

IMAGE_INLINE_SIZE_LIMIT