图像未在 React JS 中加载

如何解决图像未在 React JS 中加载

我是 React JS 世界的新手，没有正确加载 webpack 图像，但是当我使用 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,options: {
              name: 'fonts/[name].[hash:8].[ext]',};

请帮助我，我该如何解决这个问题。

解决方法

终于找到了解决方案，使用下面的属性设置为大于图像大小

IMAGE_INLINE_SIZE_LIMIT