Con Webpack, puedes crear usando “import” el archivo directamente en el módulo JavaScript. Esto le dice a Webpack que incluya el archivo en el código. A diferencia de la importación de CSS, al importar un archivo, se muestra el valor de la cadena. El valor de este archivo importado es la ruta final que puede ser referenciada en el código, por ejemplo como atributo “src” para una imagen o un “href” para un enlace PDF.
Para reducir el número de peticiones al servidor, cuando se importan imágenes de menos de 10.000 bytes, se devuelve una URL de datos en lugar de una ruta. Esto se aplica a las siguientes extensiones de archivo: svg, jpg, jpeg, png, gif, mp4, webm, wav, mp3, m4a, aac y oga.
Para importar imágenes svg sería lo mismo solo que cambiando el jpg por svg.
Si tenéis problemas con el color de vuestros archivos svg tendréis que entrar en el archivo svg y buscar el componente fill, en este componente podremos definir el color.
Conclusión
Añadir imágenes en Gatsby es una tarea sencilla que se puede realizar de varias maneras. Sea cual sea el método elegido, es importante asegurarse de que las imágenes estén en el formato correcto y se encuentren en una ubicación accesible desde la aplicación. Con esto, añadir imágenes en Gatsby debería ser una tarea fácil y rápida para cualquier desarrollador.
