Tengo un componente de reacción que está destinado a representar una imagen. Con el componente funcional, paso la ruta relativa de las imágenes desde el archivo. Quiero renderizar la imagen de manera simple en el navegador de URL. Leí que debería usar require . Cuando trato de renderizarlo, muestra que la imagen no está allí y el ícono de imagen vacío. No estoy seguro de qué más hacer. aquí está mi componente.

 import React from 'react' export default function PropertyImage({ image }) { console.log(image) return ( <div> <img src={require(image)}/> </div> ) }

También he probado:

 export default function PropertyImage({ image }) { console.log(image) return ( <div> <img src={image}/> </div> ) }

Esta es la ruta relativa que tengo, que es lo que muestra la imagen en el archivo console.log:

 ../images/unnamed.jpeg

Aquí está la estructura del archivo.

Estructura de archivos