No es posible cargar las opciones de imagen en graphql utilizando JSON personalizado.
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.
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: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 complementogatsby-image
en nuestro proyecto de Gatsby.También puedes elegir entre
fluid
ysrc
según tus requisitos de imagen. Si necesitas una imagen de tamaño fijo, puedes usarsrc
en lugar defluid
.Asegúrate de mapear los datos que obtienes de la consulta y utiliza el componente
GatsbyImage
degatsby-image
para mostrar las imágenes.¡Espero que esto te ayude!