gatsby-image-plugin 和内容丰富

Question

我正在为一个投资组合项目开发 web 应用程序：使用 gatsbyjs、contentful 和 graphql 创建一个应用程序来帮助人们了解日本食物。

但是，我无法让 gatsby-image-plugin 找到 graphql 节点以从内容数据库动态渲染图像。

我通过 getImage 尝试了不同的方法，或者只是传递了类似的东西

常量图像 = data.contenfulSushiFish.fishImages

或者

const image = data.contentfulSushiFish.fishImages.gatsbyImageData

等等……到 <GatsbyImage src={image} alt…………

但我不断收到类型错误：

未捕获的类型错误：data.contentfulSushi 未定义

---

我有一个节点文件，它通过 gatsby-node.js 动态创建页面，引发错误的代码是 sushi-fish.js 模板文件，我在其中运行另一个类似的 graphql 查询来创建各个页面。

这是一个没有图像的项目的链接： https://vigilant-varahamihira-b6f541.netlify.app/

import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { graphql, Link } from "gatsby"
import Layout from "../components/layout"

// THE SUSHI FISH COMPONENT FOR MAKING PAGES ETC
 
 export const query = graphql`
 query ($id: String) {
  contentfulSushiFish(id: {eq: $id}) {
    fishName
    commonName
    allergies
    whatToLookFor
    fishImages {
      gatsbyImageData(layout: CONSTRAINED, width: 125 )
      file {
        url
        fileName
        contentType
      }
    }
  }
}`

const Sushi = ({ data }) => {

  const sushi = data.contentfulSushiFish;
  const image = getImage(data.contentfulSushi.fishImages);

  return (
<Layout>
<Link to="/fish">BACK</Link>
<GatsbyImage image={image} alt={'alt text'} /> 

是的，这段代码就是我所在的位置。 在这一点上，我正在黑暗中寻求答案。

为什么 GatsbyImage 似乎无法在这里渲染正确的节点？

我的理解是，上面的 gatsbyImageData 知道如果你指向正确的方向该怎么做。

对此的任何帮助都会带来极大的快乐，哈哈。

Answer 1

好的！

我找到了问题的根源。

我内容丰富的 model 有一个 'fishImages' 字段，它接受更多图像，因此查询数据返回一个数组。

这解释了控制台中的简单“类型错误”。

这是有效的代码片段：

<GatsbyImage image={data.contentfulSushiFish.fishImages[0].gatsbyImageData} alt={'alt text'} />

因此，如果您希望使用来自内容丰富或 wordpress 等的动态图像，请注意您的 model 详细信息，因为调试问题可能会很棘手。