Gatsby

Question

所以我已经尝试了 6 次以上，今天我已经完成了，但想问问是否有人知道解决方案。

问题来了：我想在 Markdown 文件中包含一组图像，这些图像将用于为 Gatsby 生成的每个页面创建一个图库。

我的 Markdown 文件：

---
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

因此，当我尝试获取 mainImage 时，一切正常，但如果我尝试从 galleryImages 获取图像，则图像的来源不起作用。

这是我的 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
            }
        }
    }
`;

我使用 GatsbyImage 组件来渲染图像。下面的示例应该解释我如何使用主图像查询中的数据。如果我尝试映射来自 galleryImages 的数据，图像不会加载，因为源路径无效。

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

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

编辑：（添加了图库图像的输出）

[
   {
      "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

您需要更改方法，因为 mainImage 是单个文件，而 galleryImages 是一个数组（很明显）。因此，您的辅助函数 (getImage) 需要指向数组本身的每个特定图像。这样的事情应该有效：

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

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

然后，您的 GatsbyImage 应该遍历图像数组：

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

调整它以适应您的需要，因为我不知道 getImage 在这种情况下是否有效，您可以随时省略帮助程序，例如：

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

P.S：使用gatsby clean避免缓存渲染。

Answer 2

正如 Fer运行 Buireu 所说，我需要按照他们在回答中显示的那样映射数组。

我已经这样做了，但正如我在问题中所说，查询返回的图像来源不起作用。可能在问题中没有详细说明这一点。

修正：

所以我无法修复它，就去睡觉了。第二天，我什么也没做，它以某种方式起作用了。

大约一天后，它又停止工作了。我认为这可能是缓存出了问题，所以我运行 gatsby clean 解决了这个问题。

Gatsby - 从 Markdown 文件中的数组中获取多张图像

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

javascript

reactjs