Gatsby如何从Markdown文件的图片数组中获取资源生成画廊

你提供的GraphQL查询返回结果已经能看到galleryImages的gatsbyImageData完整生成，说明数据解析和转换环节没有问题，问题出在渲染遍历逻辑上，按以下步骤修改即可：

1. 正确的画廊渲染代码示例 #

import { GatsbyImage, getImage } from "gatsby-plugin-image"

const game = data.markdownRemark;
// 取出画廊数组
const galleryImages = game.frontmatter.images.galleryImages;

// 渲染部分
return (
  <div className="gallery">
    {/* 遍历数组的每一项单独渲染 */}
    {galleryImages.map((imgItem, index) => {
      const image = getImage(imgItem);
      return <GatsbyImage 
        key={imgItem.id} 
        image={image} 
        alt={`画廊图片${index+1}`} 
      />
    })}
  </div>
)

2. 常见错误排查 #

• 不要直接将galleryImages数组整体传入getImage，必须遍历数组后对每一项单独调用getImage
• 检查是否给GatsbyImage组件正确传递了image属性，不要误传成src属性
• 确保你已经正确导入GatsbyImage和getImage两个API，且依赖版本匹配

内容的提问来源于stack exchange，提问作者Dantcho