在 Gatsby 中将查询图像与 JSON 变量匹配答案

【问题标题】：Matching query images with JSON variable in Gatsby在 Gatsby 中将查询图像与 JSON 变量匹配
【发布时间】：2022-01-05 11:05:49
【问题描述】：

所以，我有一个 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

【问题讨论】：

标签： javascript reactjs json graphiql

【解决方案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
}

【讨论】：