在 Gatsby 中使用 JSON 变量匹配查询图像

Question

所以，我有一个 JSON 文件，其中包含我正在拉入我的 React 项目的信息。其中一个字段是图像关键字。我想用它来调用可以转储促销图像的“显示”文件夹中的图像。

thisYear.json

{
        "title": "Rope",
        "author": "Patrick Hamilton",
        "image": "rope",

    },{
        "title": "I Hate Hamlet",
        "author": "Paul Rudnick",
        "image": "iHateHamlet",

    }
]

我做了一个查询，将图像从所说的“显示”文件夹抓取到 jsx 文件

{
  allFile(filter: {relativeDirectory: {eq: "shows"}}) {
    edges {
      node {
        id
        name
        childImageSharp {
          gatsbyImageData(placeholder: DOMINANT_COLOR)
        }
      }
    }
  }

}

我尝试编写一些比较名称属性的函数，但我似乎无法编写任何有效的函数。我在这里没有掌握任何东西，我只是不知道它是什么。

在我映射 JSON 文件并与查询数据 imageData 进行比较时，传入了 showImage。控制台日志显示正在比较的正确名称，所以我知道它正在通过。它只是没有将该数据传递给 GatsbyImage。

    function findImage(showImage) {
        imageData.map((image) => {
            console.log(image.node.name + ' vs ' + showImage)
            if (image.node.name == showImage) {
                /**if the image name == our show image name, we return that image data */
                return data.file.childImageSharp.gatsbyImageData
            }
        })
        return
    }

如果有帮助，我的 git 存储库在这里： https://github.com/TheComeBackGuy/TKD-Gatsby

Answer 1

好吧，我知道我做错了什么。我没有将答案返回到函数的根目录。我相信更有经验的人可以把它写得更干净，但这是我使用的。

export default function FindImage(queryArray, showImage) {
    let returnStatement = null
    queryArray.map((images) => {
        if (images.node.name == showImage) {
            console.log(showImage + ' vs ' + images.node.name)
            console.log(images.node.childImageSharp.gatsbyImageData)
            returnStatement = images.node.childImageSharp.gatsbyImageData
        }
    })
    return returnStatement
}

在 Gatsby 中使用 JSON 变量匹配查询图像

Matching query images with JSON variable in Gatsby

javascript

json

reactjs

graphiql