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"
}
]
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.