Breaking

Post Top Ad

Your Ad Spot

viernes, 6 de septiembre de 2019

Usando la imagen en la aplicación Gatsby de una manera clara


La visualización de imágenes es una tarea común en el desarrollo web, cómo usarlo en la aplicación Gatsby puede parecer confuso, este artículo describe la respuesta.
Gatsby tiene muchas características para ganarse el amor de los desarrolladores y prevalece sobre otros generadores de sitios estáticos convencionales. Una de esas características es el componente gatsby-image . Solucionó el problema de optimización de la imagen con el alcance de dimensión especificado que definió, presentando progresivamente y de manera receptiva a la página web, brinda al usuario una experiencia de navegación cómoda.

Pasos para usar gatsby-image

Como dijo el documento oficial, hay tres pasos necesarios para implementar una imagen gatsby en el sitio web de Gatsby:
  • instale el componente gatsby-image y otros dos complementos de dependencia de compilación: gatsby-transformer-sharp y gatsby-plugin-sharp
  • defina el directorio de origen de la imagen en el complemento gatsby-source-filesystem, así como los dos complementos anteriores en la sección de complementos `gatsby-config.js`
  • importe el componente `gatsby-image` a su componente de página gatsby y declare una etiqueta / instancia de imagen con una propiedad` fixed` o `fluid` cuyo valor derivado de la consulta graphql.
En el paso 2, le dice a la herramienta de compilación Gatsby, dónde encontrar el directorio `raíz` de todos los archivos de imagen. Al igual que en el ejemplo de documentación, el directorio raíz aquí es `src / images /` del proyecto actual de Gatsby:
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: path.join(__dirname, `src`, `images`),
  },
},
En el paso 3, le dice a la instancia del componente gatsby-image dónde obtener el resultado de la consulta file: graphql.
export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

¿En qué directorio poner imagen?

Después de ver este fragmento de código graphql, puede preguntarse dónde está el blog / avatars / kyle-mathews.jpeg . ¿Está bajo la raíz del proyecto o src / images? tomemos una prueba de un proyecto gatsby en blanco.

  • crear proyecto gatsby:
$ gatsby new using-image-in-gatsby
  • coloque la imagen kyle-mathews.jpeg en `src / images / blog / avatars /`.
  • reemplace el contenido original index.js con el siguiente código:
Nota: No olvide la propiedad 'data' en las propiedades de IndexPage.
Ahora, podemos iniciar el sitio web sin la necesidad de modificar otras cosas:
$ gatsby develop
Visite el `http: // localhost: 8000 /` en su navegador, verá el resultado correcto.
Este experimento verificó nuestra especulación, es decir:
gatsy-image query (graphql) usando la ruta relativa bajo la ruta definida en gatsby-source-filesystem como condición de consulta!

¿Qué tal el valor de origen de la imagen dinámica?

El ejemplo anterior utiliza el valor estático blog / avatars / kyle-mathews.jpeg para consultar en la expresión graphql. Entonces, ¿qué pasa si la condición de consulta es de metadatos del archivo de descuento?
El documento oficial sobre [ Trabajar con la imagen en publicaciones y páginas de Markdown nos dijo que colocaba la imagen destacada en la misma posición del archivo de reducción:
example-post.md:
---
title: My Amazing Post
featuredImage: ./awesome-image.png
---

Content goes here!
Sin embargo, en esta solución funciona, pero si tiene muchas publicaciones que incluyen muchas imágenes en cada publicación, la estructura del directorio crecerá dramáticamente y terminará en un caos.
¿Cómo reestructurar el camino de las imágenes de manera razonable?
  • Paso uno: defina una nueva fuente de contenido en gatsby-config.js
plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content`,
        name: `content`,
      },
    },
    ...
]
  • Paso dos: coloque todas las imágenes en contenido / activos
separar archivos de imagen y archivos .md a diferentes carpetas
  • Paso tres: haga referencia a la imagen utilizando la ruta relativa en los metadatos del archivo de reducción.
  • example-post.md:
---
title: My Amazing Post
featuredImage: ../assets/awesome-image.png
---

Business intro is missing...

Cómo usar la etiqueta html img en una aplicación Gatsby

En una aplicación web normal, el elemento html img puede usar una ruta relativa o absoluta para asignar la propiedad src . Usamos la imagen de forma nativa y estática como dice el documento oficial , colocamos la imagen en una carpeta estática , mostramos la imagen en la página web como esperábamos. Pero, cuando creamos e implementamos el sitio gatsby, las páginas de GitHub , visítelo bajo un patrón de URL como este:
https://username.github.io/your-gatsby-website/
Las imágenes declaradas por la etiqueta img roto todo!
Aunque todas las imágenes gatsby creadas por ` $ gatsby build --prefx-paths` funcionan, pero esas imgs nativas no funcionan.
¿Cual es la solución?
  • Una solución es refactorizar todos los componentes `img`s a` gatsby-image`
  • Otra solución es agregar un prefijo de contexto a la propiedad img `src`.
Por ejemplo:
<img src="/ueofcweb/images/project-home.jpg" className="img-fluid" alt="ultronele screenshot" />
ueofcweb es el nombre del proyecto github, images / project-home.jpg está realmente en ueofcweb / static .
Si está refactorizando un sitio web tradicional que usa una gran cantidad de etiquetas img, la segunda opción sería una opción barata. Mi sitio oficial de producción se migró de la pila bootstrap / jquey, mientras lo agregaba al escaparate de Gatsby , paso horas para descubrir que el segundo enfoque es la mejor manera para mí.
La última nota que puedo dar en esta publicación es:
No agregue carpetas bajo 'static' al sistema de archivos fuente gatsby, es una práctica MALA que termina con el error de compilación 'childImageSharp' de nulo.
Gatsby image es la mejor solución de imagen receptiva que he conocido. Le libera del tedioso trabajo de optimización en la fase de construcción, agrega un buen rendimiento y una excelente experiencia de usuario a su sitio web. Te merece pasar tiempo para profundizar y usar de manera competente.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas