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
export
con un único export en un archivo (o undefault
) lo que hace es devolver un objeto con todo metido en el atributodefault
, por eso si usasrequire()
debes añadir el atributodefault
. Si usasimport
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 usasimport
no hay necesidad de añadir el.default
, y es la manera correcta de hacerlo con react, angular...