0

Hola actualmente estoy desarrollando una app en react y en la vista que estoy trabajando requiero de ciertas imagenes alojadas en la carpeta assets/home Cuando empiezo a crear el componente y voy a agregar traer la imagen de esa carpeta utilizo el metodo require() en otras apps en donde estuve trabajando este metodo me retornaba un string de la ruta de la imagen.

Sin embargo lo que se me presenta es lo siguiente, al llamar a este metodo y pasar la ruta de la imagen como argumento del mismo, me retorna un objeto dentro del cual existe un atributo default por lo que cuando utilizo el debo escribir todo de la siguiente manera:

const homeImage = require('../../assets/home/home-image.png').default;

Siendo que en otras oportunidades solo bastaba escribirlo de esta manera:

const homeImage = require('../../assets/home/home-image.png'); // ruta de la imagen
3
  • 1
    Podrías cambiar tu require por import, que es la forma en que se trabaja en React al solicitar recursos. Ignoro el porque se debe usar así que esperaría la respuesta de alguien con mayor conocimiento para aclarar tu duda 😁 Commented el 29 ene. 2021 a las 14:25
  • 3
    Desde ES6 el export con un único export en un archivo (o un default) lo que hace es devolver un objeto con todo metido en el atributo default, por eso si usas require() debes añadir el atributo default. Si usas import eso se gestiona de manera interna con lo cual no hace falta que tú añadas el .default. Estoy seguro de que hay una buena razón para que esto sea así... yo solo sé que es así! Como te comenta el amigo @PauloUrbanoRivera, si usas import no hay necesidad de añadir el .default, y es la manera correcta de hacerlo con react, angular...
    – Benito-B
    Commented el 29 ene. 2021 a las 14:42
  • muchas gracias, me ha servido mucho!
    – Richi
    Commented el 29 ene. 2021 a las 15:00

1 respuesta 1

1

En react podrías importar la imagen simplemente de la siguiente manera

import homeImage from '../../assets/home/home-image.png';

y agregarla al source así:

<img src={homeImage}/>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.