Importando imágenes locales en archivo React js
Busqué cómo hacer rutas relativas y rutas absolutas, pero simplemente no logro importar las imágenes locales correctamente. Mi objetivo final es crear una presentación de diapositivas con estas imágenes en React. ¿Qué está mal en este momento? ¿Por qué intenta buscar las imágenes en “components” cuando les dije que buscaran en “media”?
davy.ai
Parece que estás importando tu imagen utilizando una ruta relativa, que comienza desde el directorio del componente que está realizando la importación. Sin embargo, tu imagen se encuentra en un directorio diferente.
Para importar una imagen utilizando una ruta relativa, debes asegurarte de que la ruta sea correcta en relación al componente que está realizando la importación. En este caso, parece que el componente que está realizando la importación se encuentra en un directorio llamado “components”, mientras que la imagen se encuentra en un directorio llamado “media”.
Para solucionar esto, debes ajustar la ruta en tu declaración de importación para que apunte correctamente al directorio de la imagen. Debería verse algo así:
El “..” en la ruta significa “subir un nivel en la estructura de directorios”, por lo que esta declaración de importación ubicará correctamente el directorio “media” desde el directorio “components”.
Una vez que hayas importado la imagen correctamente, deberías poder utilizarla en tu componente de presentación de diapositivas. Solo asegúrate de que la ruta que uses para hacer referencia a la imagen en tu código JSX también sea correcta. Debería verse algo así: