Estoy buscando usar Forestry con Gatsby (y uso gatsby-plugin-image para optimizar las imágenes), pero no sé cómo hacerlo funcionar y no estoy seguro de si es posible.
La ruta de la imagen se establece en archivos JSON (para que todo el contenido de la página sea editable) y las imágenes se cargan en la carpeta static/uploads porque Forestry requiere una ruta absoluta para las imágenes:
content/pages/home.json :
{ "title": "Home", "hero_image": "../../uploads/hero_image.png", "hero_image_alt": "An image", ... } --> Este enfoque no lo hará consultable en GraphQL por Gatsby, por lo que solo puedo usarlo en una etiqueta img normal:
pages/index.js :
import { useStaticQuery, graphql } from "gatsby" ... const { allPagesJson } = useStaticQuery( graphql` { allPagesJson { nodes { hero_image_alt hero_image } } } ` const data = allPagesJson.nodes[0] <img src={data.hero_image} alt={data.hero_image_alt} /> Las imágenes se cargan en content/images y luego se agrega una ruta relativa en los archivos JSON:
content/pages/home.json :
{ "title": "Home", "hero_image": "../images/hero_image.png", "hero_image_alt": "A picture" } --> Este enfoque lo hace consultable, por lo que creo que puedo usarlo en el componente GatsbyImage , pero siempre devuelve un error 404:
pages/index.js :
import { useStaticQuery, graphql } from "gatsby" import { GatsbyImage, getImage } from "gatsby-plugin-image" ... const { allPagesJson } = useStaticQuery( graphql` { allPagesJson{ nodes { hero_image_alt hero_image { childImageSharp { gatsbyImageData } } } } } ` ) ... const data = allPagesJson.nodes[0] const hero_image = getImage(data.hero_image) ... <GatsbyImage image={hero_image} alt={data.hero_image_alt} /> Esto devuelve el error: GET http://localhost:8000/static/130e6fa61e2ebe523785c187e562a5f8/61d51/hero_image.webp 404 (Not Found)
He estado luchando con esto toda la tarde y no estoy seguro de qué más puedo intentar para que funcione con Forestry.
Mis requisitos básicos son que necesito poder hacer que todo el contenido de la página sea editable (texto/imágenes) para los usuarios en lugar de solo poder crear publicaciones + optimizar las imágenes con GatsbyImage, así que si hay una mejor manera en general de hacer que eso suceda, yo También soy todo oídos.
El primer enfoque que probé (que no funciona con Gatsby Image) es:
Este enfoque no lo hará consultable en GraphQL por Gatsby, por lo que solo puedo usarlo en una etiqueta
imgnormal
Eso no es cierto en absoluto. Si almacena imágenes estáticas dentro de su proyecto, debe decirle a Gatsby dónde están esas imágenes para permitirle crear los nodos adecuados para recuperar (para usar junto con GatsbyImage ). Esto se hace configurando un sistema de archivos que señala la ruta donde se almacenan esas imágenes.
{ resolve: `gatsby-source-filesystem`, options: { name: `images`, path: `${__dirname}/uploads/`, }, }, Nota: modifíquelo para que coincida con su ruta de carga. En este caso, Gatsby "analizará" la carpeta de carga y, si hay imágenes allí, creará los nodos adecuados. Una vez que eso, utilizando el área de juegos de GraphiQL ( localhost:8000/___graphql ), encontrará los nodos de imágenes para buscar.
Con el segundo enfoque, el nodo se agrega porque /images es un sistema de archivos predeterminado para activos de imagen, por lo que agrega lo que acabo de explicar automáticamente. Compruebe esas configuraciones en gatsby-config.js .
Con respecto al segundo problema de enfoque, el 404, la solución parece buena a pesar de que puede faltar algo en la declaración de data o hero_image . Su componente GatsbyImage se ve bien pero parece que los datos están vacíos.
... const data = allPagesJson.nodes[0] console.log(data) const hero_image = getImage(data.hero_image) console.log(hero_image ) ... <GatsbyImage image={hero_image} alt={data.hero_image_alt} />Intente compartir el fragmento completo.