Gatsby - Get multiple images from an array in a Markdown file

Question

So I've been trying for more than 6 and I'm done for today, but wanted to ask if someone knew a solution.

So here's the issue: I wanted to have an array of images in a Markdown file which will be used to create a gallery for each page generated by Gatsby.

My Markdown File:

---
title: "Assassin's Creed III"
rating: { "graphics": 3, "gameplay": 4, "story": 4 }
images:
  {
    mainImage: "main.jpg",
    galleryImages: ["image1.jpg", "image2.jpg", "image3.jpg"],
  }
---

# Assassin's Creed III

So when I try to get the mainImage everything works, but if I try to get an image from galleryImages the source to the image doesn't work.

Here's is my GraphQl:

export const query = graphql`
    query ($slug: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
            html
            frontmatter {
                title
                rating {
                    gameplay
                    graphics
                    story
                }
                images {
                    mainImage {
                        childImageSharp {
                            gatsbyImageData
                        }
                    }
                    galleryImages {
                        childImageSharp {
                            gatsbyImageData
                        }
                    }
                }
            }
        }
        site {
            siteMetadata {
                title
            }
        }
    }
`;

I used the GatsbyImage component to render the images. The example below should explain how I used the data from the query for the main image. If I tried to map the data from galleryImages the image doesn't load, because of the invalid source path.

const game = data.markdownRemark;
const image = game.frontmatter.images.mainImage;

<GatsbyImage image={getImage(image)} alt={alt} />

Edit: (Added the output of gallery images)

[
   {
      "childImageSharp":{
         "gatsbyImageData":{
            "layout":"constrained",
            "backgroundColor":"#282818",
            "images":{
               "fallback":{
                  "src":"/static/0474e7351749df0e8ba70a47ed4186d6/8040d/image1.jpg",
                  "srcSet":"/static/0474e7351749df0e8ba70a47ed4186d6/04796/image1.jpg 240w,\n/static/0474e7351749df0e8ba70a47ed4186d6/328b3/image1.jpg 480w,\n/static/0474e7351749df0e8ba70a47ed4186d6/8040d/image1.jpg 960w",
                  "sizes":"(min-width: 960px) 960px, 100vw"
               },
               "sources":[
                  {
                     "srcSet":"/static/0474e7351749df0e8ba70a47ed4186d6/b6a4c/image1.webp 240w,\n/static/0474e7351749df0e8ba70a47ed4186d6/5bfa1/image1.webp 480w,\n/static/0474e7351749df0e8ba70a47ed4186d6/9311c/image1.webp 960w",
                     "type":"image/webp",
                     "sizes":"(min-width: 960px) 960px, 100vw"
                  }
               ]
            },
            "width":960,
            "height":544
         }
      },
      "id":"f170b256-785e-5039-beaf-3a67ad15f2e1"
   },
   {
      "childImageSharp":{
         "gatsbyImageData":{
            "layout":"constrained",
            "backgroundColor":"#384858",
            "images":{
               "fallback":{
                  "src":"/static/9c8a44869a770900091a4196598bd0bb/8040d/image2.jpg",
                  "srcSet":"/static/9c8a44869a770900091a4196598bd0bb/04796/image2.jpg 240w,\n/static/9c8a44869a770900091a4196598bd0bb/328b3/image2.jpg 480w,\n/static/9c8a44869a770900091a4196598bd0bb/8040d/image2.jpg 960w",
                  "sizes":"(min-width: 960px) 960px, 100vw"
               },
               "sources":[
                  {
                     "srcSet":"/static/9c8a44869a770900091a4196598bd0bb/b6a4c/image2.webp 240w,\n/static/9c8a44869a770900091a4196598bd0bb/5bfa1/image2.webp 480w,\n/static/9c8a44869a770900091a4196598bd0bb/9311c/image2.webp 960w",
                     "type":"image/webp",
                     "sizes":"(min-width: 960px) 960px, 100vw"
                  }
               ]
            },
            "width":960,
            "height":544
         }
      },
      "id":"7b9f4da7-5a14-510c-86be-e12b782f65cb"
   },
   {
      "childImageSharp":{
         "gatsbyImageData":{
            "layout":"constrained",
            "backgroundColor":"#282828",
            "images":{
               "fallback":{
                  "src":"/static/af8a55a89464162034e110b858e6f7fe/8040d/image3.jpg",
                  "srcSet":"/static/af8a55a89464162034e110b858e6f7fe/04796/image3.jpg 240w,\n/static/af8a55a89464162034e110b858e6f7fe/328b3/image3.jpg 480w,\n/static/af8a55a89464162034e110b858e6f7fe/8040d/image3.jpg 960w",
                  "sizes":"(min-width: 960px) 960px, 100vw"
               },
               "sources":[
                  {
                     "srcSet":"/static/af8a55a89464162034e110b858e6f7fe/b6a4c/image3.webp 240w,\n/static/af8a55a89464162034e110b858e6f7fe/5bfa1/image3.webp 480w,\n/static/af8a55a89464162034e110b858e6f7fe/9311c/image3.webp 960w",
                     "type":"image/webp",
                     "sizes":"(min-width: 960px) 960px, 100vw"
                  }
               ]
            },
            "width":960,
            "height":544
         }
      },
      "id":"1f8596cb-bf83-5373-a73c-3012e3663086"
   },
   {
      "childImageSharp":{
         "gatsbyImageData":{
            "layout":"constrained",
            "backgroundColor":"#282818",
            "images":{
               "fallback":{
                  "src":"/static/fde7a1425f446c73bb5ea1dd41520e13/8040d/image4.jpg",
                  "srcSet":"/static/fde7a1425f446c73bb5ea1dd41520e13/04796/image4.jpg 240w,\n/static/fde7a1425f446c73bb5ea1dd41520e13/328b3/image4.jpg 480w,\n/static/fde7a1425f446c73bb5ea1dd41520e13/8040d/image4.jpg 960w",
                  "sizes":"(min-width: 960px) 960px, 100vw"
               },
               "sources":[
                  {
                     "srcSet":"/static/fde7a1425f446c73bb5ea1dd41520e13/b6a4c/image4.webp 240w,\n/static/fde7a1425f446c73bb5ea1dd41520e13/5bfa1/image4.webp 480w,\n/static/fde7a1425f446c73bb5ea1dd41520e13/9311c/image4.webp 960w",
                     "type":"image/webp",
                     "sizes":"(min-width: 960px) 960px, 100vw"
                  }
               ]
            },
            "width":960,
            "height":544
         }
      },
      "id":"3b32bf6c-cc00-5656-86da-3cd038916324"
   },
   {
      "childImageSharp":{
         "gatsbyImageData":{
            "layout":"constrained",
            "backgroundColor":"#282828",
            "images":{
               "fallback":{
                  "src":"/static/1b2ad29758af6a4bae16bedb6bad804b/8040d/image5.jpg",
                  "srcSet":"/static/1b2ad29758af6a4bae16bedb6bad804b/04796/image5.jpg 240w,\n/static/1b2ad29758af6a4bae16bedb6bad804b/328b3/image5.jpg 480w,\n/static/1b2ad29758af6a4bae16bedb6bad804b/8040d/image5.jpg 960w",
                  "sizes":"(min-width: 960px) 960px, 100vw"
               },
               "sources":[
                  {
                     "srcSet":"/static/1b2ad29758af6a4bae16bedb6bad804b/b6a4c/image5.webp 240w,\n/static/1b2ad29758af6a4bae16bedb6bad804b/5bfa1/image5.webp 480w,\n/static/1b2ad29758af6a4bae16bedb6bad804b/9311c/image5.webp 960w",
                     "type":"image/webp",
                     "sizes":"(min-width: 960px) 960px, 100vw"
                  }
               ]
            },
            "width":960,
            "height":544
         }
      },
      "id":"333d7f69-bb09-59ae-8c32-b8c26b201543"
   },
   {
      "childImageSharp":{
         "gatsbyImageData":{
            "layout":"constrained",
            "backgroundColor":"#586868",
            "images":{
               "fallback":{
                  "src":"/static/8a3d92ec10cd3e0869a8941c02eb569d/8040d/image6.jpg",
                  "srcSet":"/static/8a3d92ec10cd3e0869a8941c02eb569d/04796/image6.jpg 240w,\n/static/8a3d92ec10cd3e0869a8941c02eb569d/328b3/image6.jpg 480w,\n/static/8a3d92ec10cd3e0869a8941c02eb569d/8040d/image6.jpg 960w",
                  "sizes":"(min-width: 960px) 960px, 100vw"
               },
               "sources":[
                  {
                     "srcSet":"/static/8a3d92ec10cd3e0869a8941c02eb569d/b6a4c/image6.webp 240w,\n/static/8a3d92ec10cd3e0869a8941c02eb569d/5bfa1/image6.webp 480w,\n/static/8a3d92ec10cd3e0869a8941c02eb569d/9311c/image6.webp 960w",
                     "type":"image/webp",
                     "sizes":"(min-width: 960px) 960px, 100vw"
                  }
               ]
            },
            "width":960,
            "height":544
         }
      },
      "id":"78fc934c-04ea-56d7-b2b9-a349519dcfe5"
   }
]

Answer 1

the way I've done it is by using mdx list items like so :

---
title : "product title"
main_img : "./main-image.jpg"
images : 
  - "./images-1"
  - "./image-2"
  - "./image-3"
---

images in the frontmatter will be now available as an array

Answer 2

You need to change the approach since mainImage is a single file while galleryImages is an array (quite obvious). So your helper function (getImage) needs to point to each specific image of the array itself. Something like this should work:

const game = data.markdownRemark;
const arrayOfImages = [];

game.frontmatter.images.galleryImages.map(galleryImage => arrayOfImages.push(galleryImage);

Then, your GatsbyImage should loop through the array of images:

return <div>Some images:
   {arrayOfImages.map(image => <GatsbyImage image={getImage(image)} alt={alt} />)}
</div>

Tweak it to adapt it to your needs since I don't know exactly if getImage will work in this scenario, you can always omit the helper like:

   {arrayOfImages.map(image => <GatsbyImage image={image.childImageSharp.gatsbyImageData} alt={alt} />)}

P.S: use gatsby clean to avoid cached renderings.

Answer 3

So as Ferran Buireu said I need to map the array as they showed in their answer.

I had already done that, but as I said in my question the sources for the images returned by the query didn't work. Probably didn't specify this well enough in the question.

The fix:

So I couldn't fix it and just went to sleep. The next day it somehow worked without me doing anything.

After a day or so it stopped working again. I thought it was probably some cache thing going wrong so I ran gatsby clean which solved the issue.