0
194
Vistasrenderizar imagen con GatsbyImage
No puedo renderizar una imagen dinámica proveniente de strapi cms usando GatsbyImage de gatsby-plugin-image
Todo funcionó bien con el antiguo complemento gatsby-image , realmente no sé qué estoy haciendo mal aquí.
Warning: Failed prop type: The prop src is marked as required in J , but its value is definido .
¿Cómo debo usar el objeto de image o la función getImage() para representar GatsbyImage ?
export const query = graphql` { allStrapiProjects(filter: { featured: { eq: true } }) { nodes { title image { localFile { childImageSharp { fluid { ...GatsbyImageSharpFluid } } } } } } import { GatsbyImage, getImage, StaticImage } from "gatsby-plugin-image"; const Project = ({ image, }: any) => { const gatsbyImg = getImage(image); const imgPath = image.localFile.childImageSharp.fluid; console.log("gatsbyImg:", gatsbyImg); console.log("image:", image); console.log("imgPath:", imgPath); return ( ... <GatsbyImage image={imgPath} alt={"alt"} /> )Resultado de salida para los registros de la consola anteriores:
1 Respuestas
Responde la pregunta0
Como señaló, el problema aparece debido a la combinación de nodos GraphQL entre gatsby-image y gatsby-plugin-image . Resumiendo mucho, su nodo consultable debe ser gatsyImageData en lugar de fluid o fixed .
Esta es la sintaxis anterior: importar {graphql} de "gatsby"
export const query = graphql` { file(relativePath: { eq: "images/example.jpg" }) { childImageSharp { fixed { ...GatsbyImageSharpFixed } } } } `Mientras que el nuevo se parece a:
import { graphql } from "gatsby" export const query = graphql` { file(relativePath: { eq: "images/example.jpg" }) { childImageSharp { gatsbyImageData(layout: FIXED) } } } `Consulta más detalles en la guía de migración
El problema es que está consultando el antiguo nodo GraphQL (fluido o fijo) que funcionó para Img (de gatsby-image ), mientras que el nuevo componente, GatsbyImage , requiere una image , extraída del nodo gatsbyImageData .
Dicho esto, getImage es una función auxiliar (no obligatoria) que te ayuda a limpiar el código.
Vuelva a verificar los siguientes pasos:
- Instala las dependencias:
npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp - Elimine las antiguas referencias de dependencia
gatsby-image, si las hubiera. - Limpiar el caché
- Consulta los nodos adecuados: compruébalos en
localhost:8000/___graphiql - (Opcional) ejecuta el codemod:
Esto adaptará automáticamente su antiguo código a la nueva sintaxis.npx gatsby-codemods gatsby-plugin-image <optional-path>
Al final, su código debería verse así:
export const query = graphql` { allStrapiProjects(filter: { featured: { eq: true } }) { nodes { title image { localFile { childImageSharp { gatsbyImageData(layout: FIXED) } } } } }Su componente debería funcionar solo ya que ahora no funciona porque no está obteniendo los datos adecuados.