Reactjs 我能'；t使用网页包和文件加载器显示本地图像

我正在使用react、lerna和webpack创建一个项目，但是，当在项目中显示本地图像时，我遇到了一个问题，即使使用webpack中的配置也无法看到这些图像。答案应该是image类型，但它是text/html类型

不同类型响应

不同类型响应

webpack.config.js

const path = require('path');

const client = {
  mode: 'development',
  entry: {
    'ftapp-login': './src/index.tsx',
  },
  output: {
    filename: '[name].js',
    libraryTarget: 'umd',
    path: __dirname + '/dist-es/',
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader',
          options: {
            configFile: path.resolve(__dirname, 'tsconfig.build.es.json'),
          },
        },
      },
      {
        test: /\.html$/,
        use: [
           {loader: 'html-loader'}
        ]
       },
      {
        test: /\.(jpe?g|png|svg)$/, 
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images',
          esModule: false
        }
      }
    ]
  },
  externals: { react: 'react' },
};
module.exports = [client];

` packcage.json

 {
  "name": "ftapp-login",
  "main": "dist-es/ftapp-login.js",
  "module": "dist-es/ftapp-login.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib"
  ],
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "build": "run-p build:es",
    "build:es": "webpack",
    "build:watch": "yarn build:es --watch",
    "watch": "run-p build:watch server",
    "server": "node ./server.js"
  },
  "bugs": {
    "url": ""
  },
  "devDependencies": {
    "express": "^4.17.1",
    "file-loader": "^6.1.0",
    "html-loader": "^1.3.1",
    "npm-run-all": "^4.1.5",
    "svg-url-loader": "^6.0.0"
  },
  "dependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  }
}

component.tsx

import * as React from 'react';
import { useHistory } from "react-router-dom";
import {ROUTES} from "./utils/routes";

//Media
**const VCIcon = require("./images/svg/vc.svg") as string;**

//import { useDispatch, useSelector } from "react-redux";

export function Login () {
  
  //state del componente
  const [user, guardarUsuario] = React.useState("");
  const [password, guardarPassword] = React.useState("");
  const history = useHistory();

  //Cuando el usuario haga submit
  const submitNuevoLogin = (e: any) => {
    e.preventDefault();

    //Validar formulario
    if (password.trim() === "") {
      return;
    }

    //Validar errores

    //Crear login


    history.push(ROUTES.HOME);
  };

  return (
    <div className="container-fluid">
        <div className="row login__stage">
          <header>
            <div className="container__logo">
              <div className="divider"></div>
              <div className="logo">
                <p>
                  <img src={VCIcon} />
                </p>
              </div>
              <div className="divider"></div>
            </div>
          </header>
          <div className="col col-md-10 login__stage-container">
            <div className="col-18 d-flex h-100 justify-content-center">
              <div className="justify-content-center align-self-top pt-35p px-5">
                <h1 className="h hl350">
                  Titulo <br /> y Titulo 
                </h1>
                <h2 className="t fw200 hl300 d-block my-5">
                  Modulo administrativo
                </h2>
                
                <form onSubmit={submitNuevoLogin}>
                <p>Usuario</p>
                  <div className="input__wrapper my-2">
                    <input
                      className="input d-block"
                      type="text"
                      value={user}
                      placeholder="Ingresar usuario"
                      onChange={(e) => guardarUsuario(e.target.value)}
                      required
                    />
                  </div>
                  <p>Contraseña</p>
                  <div className="input__wrapper my-2">
                    
                    <input
                      className="input d-block"
                      type="password"
                      value={password}
                      placeholder="Ingresar contraseña"
                      onChange={(e) => guardarPassword(e.target.value)}
                      required
                    />
                  </div>
                  <button className="align-middle buttonvc primary back-dark mt-5">
                    Iniciar Sesión
                  </button>
                </form>
              </div>
            </div>
          </div>
          <div className="col-md-14 d-none d-md-block">
            <div className="login__stage-image-container">
              
              <img src="" />
            </div>
          </div>
        </div>
      </div>
  );
}

import*as React from'React'；
从“react router dom”导入{useHistory}；
从“/utils/ROUTES”导入{ROUTES}”；
//媒体
**const VCIcon=require（“./images/svg/vc.svg”）作为字符串**
//从“react redux”导入{useDispatch，useSelector}；
导出函数登录（）{
//组件状态
const[user，guardarusario]=React.useState（“”）；
const[password，guardarPassword]=React.useState（“”）；
const history=useHistory（）；
//Cuando el-usuario haga提交
const submitNuevoLogin=（e:any）=>{
e、 预防默认值（）；
//瓦利达尔公式
if（password.trim（）==“”）{
返回；
}
//瓦利达尔误差
//Crear登录
历史。推送（路线。回家）；
};
返回(


Titulo
y Titulo
管理模
乌萨里奥

guardarUsuario（e.target.value）}
必修的
/>
康瑟斯尼娜

guardarPassword（e.target.value）}
必修的
/>
伊尼西亚·塞西翁
);
}