Imágenes de Gatsby

Gatsby es un marco gratuito y de código abierto basado en React que ayuda a los desarrolladores a crear sitios web y aplicaciones increíblemente rápidos. Los sitios de Gatsby son aplicaciones React completamente funcionales, por lo que puede crear aplicaciones web dinámicas que sean rápidas, receptivas y seguras.

Usando yo

Crear una nueva aplicación Gatsby

Paso 1: Ejecute el siguiente código en la terminal para crear un nuevo sitio de Gatsby.

npm init gatsby

Asigne el nombre ‘gfg’ al proyecto de aplicación.

Paso 2: muévase a la nueva carpeta ‘gfg’ usando el siguiente comando.

cd gfg

Estructura del proyecto:

 

Manejo de imágenes en Gatsby

Es muy difícil manejar la capacidad de respuesta y la calidad de las imágenes en cualquier marco, pero en Gatsby tenemos un complemento que podemos usar para manejar las imágenes muy fácilmente. Para usar el complemento, siga los pasos a continuación.

Paso 1: Instale el complemento usando el siguiente comando en la terminal:

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp

Paso 2: agregue los complementos a su archivo gatsby-config.js:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
  siteMetadata: {
    siteUrl: `https://www.yourdomain.tld`,
  },
    
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Paso 3: use el complemento para mostrar imágenes. Para esto, agregue el siguiente código en su archivo index.js. Estamos cargando una imagen de demostración con el nombre ‘logo.png’.

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"
  
const IndexPage = () => {
  return (
    <main >
      <h3>GeeksforGeeks - Below is the image</h3>
      <StaticImage src="logo.png" alt="Demo Image" />
    </main>
  )
}
  
export default IndexPage;

Ejecute la aplicación: use el siguiente código en la terminal para iniciar la aplicación.

npm run develop

Producción: