Image not showing up in react js using require.context - css

Question

I tried to search for the answer but I am not getting anything to solve it.
I am loading my image using require.context as you can see in the code but it's not getting loaded. It used to work perfectly before in previous versions of react js. Now I am using react version 17.0.1. There are no errors in the console. If I import the image and use it in the src it works fine. I have also tried to change the images with some previous images used in previous projects (using react version 16.x.x) which are working fine there. I am creating react app using npx-create-react-app. Path to image is correct as in case of incorrect path "module named xxx not found error occurs".
Current behavior:
Image not showing up instead alt value is showing up.
Desired behavior:
Image should show up instead of alt value.
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;
snapshot of browser:

Answer 1

You should use the default property for the images:
<img
src={images(`./Shahmeer.png`).default}
alt={`Shahmeer Avenue Logo`}
width="100"
height="100"
/>