es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No es posible cargar las opciones de imagen en graphql utilizando JSON personalizado.

31 Jul, 2023 Programación

Estoy desarrollando un sitio web utilizando Gatsby, siguiendo este enlace https://www.youtube.com/watch?v=smHhNzM5Uo4

Ahí sugiere utilizar graphql para mostrar imágenes, por lo que creó un archivo llamado Trips.json, donde se mencionan los detalles de las imágenes de la siguiente manera:

[
{
“img”: “../assets/images/python.jpeg”,
“alt”: “Tutorial de Python”,
“name”: “Tutorial de Python”,
“button”: “Ver Sitio”
},
{
“img”: “../assets/images/graphana.png”,
“alt”: “Tutorial de Graphana”,
“name”: “Tutorial de Graphana”,
“button”: “Ver Sitio”
},
{
“img”: “../assets/images/git.jpg”,
“alt”: “Tutorial de Git”,
“name”: “Tutorial de Git”,
“button”: “Ver Sitio”
},
{
“img”: “../assets/images/linux.jpg”,
“alt”: “Tutorial de Linux”,
“name”: “Tutorial de Linux”,
“button”: “Ver Sitio”
}
]

En graphql, la propiedad “img” no muestra opciones, pero para él, se muestran muchas opciones para elegir entre una url pública o “fluid”.
Aquí está la imagen: imagen

Por favor, háganme saber cómo puedo obtener todas las opciones para “img” o qué opción elegir: alt, button, name, fluid/src.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener todas las opciones bajo la propiedad img en el GraphQL, debes especificarlo en tu consulta. Puedes agregar las opciones que necesites en el objeto de la consulta de esta manera:

    query {
  allTripsJson {
    edges {
      node {
        img {
          alt
          src {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
        name
        button
      }
    }
  }
}

    Aquí, estamos utilizando la propiedad fluid para obtener una imagen responsive con diferentes tamaños. Para usar esta propiedad, necesitamos tener instalado y configurado el complemento gatsby-image en nuestro proyecto de Gatsby.

    También puedes elegir entre fluid y src según tus requisitos de imagen. Si necesitas una imagen de tamaño fijo, puedes usar src en lugar de fluid.

    Asegúrate de mapear los datos que obtienes de la consulta y utiliza el componente GatsbyImage de gatsby-image para mostrar las imágenes.

    ¡Espero que esto te ayude!

Comments are closed.