Quiero mostrar algunas imágenes dependiendo de cuántas obtenga a través de una matriz, por lo que realmente no puedo usar una declaración de importación.

Busqué en Google y descubrí que solo podía usar require(), pero no funciona como se esperaba.

GameImage.tsx

 import './css/GameImage.css'; type Image = { imgSrc: string, imgAlt: string } type Images = { images: Array<Image> } function GameImage(props: Images) { return ( <div className="game-details-image-wrapper"> {props.images.map((pair) => ( <img className="game-details-image" src={require(pair.imgSrc).default} alt={pair.imgAlt} /> ))} </div>); } export default GameImage;

como lo renderizo:

 <GameImage images={[{imgSrc: './img/Untitled.png', imgAlt: 'test'}]}/>

De esta manera conseguiré

 Cannot find module './img/Untitled.png'

pero si modifico la etiqueta img así:

 <img className="game-details-image" src={require("./img/Untitled.png").default} alt={pair.imgAlt} />

funciona correctamente.

¿Por qué sucede y cómo puedo solucionarlo?