Gatsby从state和GraphQL给GatsbyImage传参后图片无法显示求助

核心问题原因 #

你的代码存在三个核心错误直接导致图片无法渲染：

• GraphQL 查询没有返回 GatsbyImage 组件必需的 gatsbyImageData 字段，仅查询了无意义的 id 字段
• state 中给 image 字段赋值的是完整的 edge 对象，而非 GatsbyImage 要求的图片格式数据
• 未确认基础插件依赖和配置是否正确

分步修复方案 #

1. 修改GraphQL查询语句 #

替换你的原有查询，在 childImageSharp 下查询 gatsbyImageData 字段，可根据需求自定义宽度、布局等参数：

export const pageQuery = graphql `
    query {
        pics: allFile(filter: {relativeDirectory: {eq: "process"}}) {
            edges {
                node {
                    name
                    childImageSharp {
                        gatsbyImageData(width: 800, layout: CONSTRAINED)
                    }
                }
            }
        }
    }
`

2. 修正state中的image赋值 #

将测试数据的 image 字段取值路径修改为正确的图片数据路径：

constructor(props) {
    super(props);
    this.state = [
        {
            className: "flexRow flexRowL",
            title: "EXPLORE",
            copy: <p className="pStyles">我针对食物过敏人群做了<strong>用户访谈</strong>，了解他们外出就餐、尤其是点外卖时的相关体验。</p>,
            image: this.props.data.pics.edges[0].node.childImageSharp.gatsbyImageData,
            alt: "Explore UI image"
        }
    ];
}

3. 检查基础依赖配置 #

确认你已经安装了三个必需的图像处理插件：

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

同时确认 gatsby-config.js 的插件数组中已经引入这三个插件：

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    // 其余原有插件保留即可
  ]
}

修改完成后重启开发服务即可正常渲染图片。 #

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