Forestry + Gatsby Image - 来自 JSON 个文件的参考图像

Question

我正在考虑将 Forestry 与 Gatsby 结合使用（并使用 gatsby-plugin-image 来优化图像），但我仍然不知道如何让它工作，不确定它是否可行。

我尝试的第一种方法（不使用 Gatsby Image）是：

图像路径设置在JSON个文件中（使所有页面内容都可编辑）并且图像上传到static/uploads文件夹，因为Forestry需要图像的绝对路径：

content/pages/home.json:

{
  "title": "Home",
  "hero_image": "../../uploads/hero_image.png",
  "hero_image_alt": "An image",
  ...
}

--> 这种方法不会让它在 GraphQL 中被 Gatsby 查询，所以我只能在普通的 img 标签中使用它：

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} />

我尝试的第二种方法（可查询但仍然无效）是：

图片上传到content/images然后在JSON文件中添加相对路径：

content/pages/home.json:

{
  "title": "Home",
  "hero_image": "../images/hero_image.png",
  "hero_image_alt": "A picture"
}

--> 这种方法使其可查询，所以我想我可以在 GatsbyImage 组件中使用它，但它总是 returns 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} />

这个returns错误： GET http://localhost:8000/static/130e6fa61e2ebe523785c187e562a5f8/61d51/hero_image.webp 404 (Not Found)

我整个下午都在为此苦苦挣扎，不确定我还能尝试什么来让它与 Forestry 一起工作。

我的基本要求是我需要能够为用户编辑所有页面内容 (text/images) 而不是只能创建帖子 + 使用 GatsbyImage 优化图像所以如果有更好的方法总的来说，为了实现这一目标，我也洗耳恭听。

Answer 1

The first approach I tried (not working with Gatsby Image) is:

This approach will not make it queryable in GraphQL by Gatsby so I can only use it in a normal img tag

这根本不是真的。如果你在你的项目中存储静态图像，你需要告诉 Gatsby 这些图像在哪里允许它创建适当的节点来获取（与 GatsbyImage 一起使用）。这是通过设置一个指向存储这些图像的路径的文件系统来完成的。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/uploads/`,
  },
},

注意：调整它以匹配您的上传路径。 在这种情况下，上传文件夹将由 Gatsby “解析”，如果那里有图像，将创建适当的节点。之后，使用 GraphiQL 游乐场 (localhost:8000/___graphql)，您将找到要获取的图像节点。

使用第二种方法，添加节点是因为 /images 是图像资产的默认文件系统，所以它会自动添加我刚才解释的内容。检查 gatsby-config.js.

中的那些配置

关于第二种方法问题，即 404，尽管您可能在 data 或 hero_image 声明中遗漏了某些内容，但解决方法似乎不错。您的 GatsbyImage 组件看起来不错，但数据似乎是空的。

...
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} />

尝试共享完整代码段。

Forestry + Gatsby Image - 来自 JSON 个文件的参考图像

Forestry + Gatsby Image - reference image from JSON files

javascript

content-management-system

reactjs

gatsby

gatsby-image