Matching query images with JSON variable in Gatsby

So, I have a JSON file that has info I’m pulling into my Gatsby project. One of those fields is an image keyword. I want to use that to call images in a "show" folder where promo images can be dumped.


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

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


I made a query that is grabbing the images from said "show" folder to the jsx file

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


I’ve tried to write some functions that compare the name properties, but I just can’t seem to write anything that works. I’m not grasping something here and I just don’t know what it is.

The showImage is passed in while I’m mapping through my JSON file and comparing with imageData, which is the query data. The console log is showing the right names being compared, so I know it’s passing through. it’s just not passing that data to the GatsbyImage.

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

My git repository is here if it helps:

Thanks in advance

Source: React – Stack Overflow

November 28, 2021
Category : News
Tags: gatsby | graphiql | json | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.