使用 require.context 的图像未显示在反应 js 中答案

【问题标题】：Image not showing up in react js using require.context使用 require.context 的图像未显示在反应 js 中
【发布时间】：2021-03-25 02:43:25
【问题描述】：

我试图寻找答案，但没有得到任何解决方案。正如您在代码中看到的那样，我正在使用 require.context 加载我的图像，但它没有被加载。在以前的 react js 版本中，它曾经完美地工作过。现在我使用的是反应版本 17.0.1。控制台中没有错误。如果我导入图像并在 src 中使用它，它工作正常。我还尝试使用以前项目中使用的一些以前的图像（使用反应版本 16.x.x）来更改图像，这些图像在那里运行良好。我正在使用 npx-create-react-app 创建反应应用程序。图像路径正确，因为路径不正确“发生名为 xxx 的模块未找到错误”。当前行为：图像未显示，而是显示 alt 值。期望的行为：应该显示图像而不是 alt 值。

import React, { Component } from "react";
import commonStyles from "../css/common.module.css";
import loginStyles from "../css/login.module.css";
import { TextField, Button, Paper, Typography } from "@material-ui/core";

class Login extends Component {
  state = {
    userName: "",
    password: "",
    error: "",
  };
  render() {
    const images = require.context("../images", true);
    return (
      <div
        className={`${loginStyles.root} d-flex justify-content-center align-items-center ${commonStyles.bg}`}
      >
        <Paper
          classes={{
            root: `${commonStyles.paper} mt-2`,
          }}
          elevation={3}
        >
          <div className={`${loginStyles.child}`}>
            <div className={`d-flex justify-content-center align-items-center`}>
              <img
                src={images(`./Shahmeer.png`)}
                alt={`Shahmeer Avenue Logo`}
                width="100"
                height="100"
              />
            </div>
            <Typography
              classes={{
                root: `font-weight-bold`,
              }}
              variant="h5"
              gutterBottom
            >
              Login
            </Typography>
            <form noValidate autoComplete="off">
              <TextField
                classes={{
                  root: `${commonStyles.textField}`,
                }}
                onChange={(e) => this.handleChange(e)}
                id={"userName"}
                label={"User Name"}
                variant="outlined"
                error={this.state.error ? true : false}
                helperText={this.state.error}
                value={this.state["userName"]}
              />
              <TextField
                classes={{
                  root: `${commonStyles.textField}`,
                }}
                onChange={(e) => this.handleChange(e)}
                id={"password"}
                label={"Password"}
                variant="outlined"
                error={this.state.error ? true : false}
                helperText={this.state.error}
                value={this.state["password"]}
              />
              <div className={`w-100 d-flex justify-content-end mt-2`}>
                <Button variant="contained" color="primary">
                  Login
                </Button>
              </div>
            </form>
          </div>
        </Paper>
      </div>
    );
  }
}

export default Login;

浏览器截图：

【问题讨论】：

标签： css reactjs image

【解决方案1】：

您应该为图像使用default 属性：

 <img
   src={images(`./Shahmeer.png`).default}
   alt={`Shahmeer Avenue Logo`}
   width="100"
   height="100"
 />

【讨论】：