Gatsby使用GatsbyImage时提示image属性为undefined问题求助

你遇到的报错主要由三处配置错误导致：

• gatsby-node.js中你手动创建的图片节点代码// actions.create(imageNode)被注释，且未配置正确的媒体类型标记，gatsby-plugin-sharp无法识别处理该节点生成可用于GatsbyImage的图片数据
• 组件中调用getImage时传入的是所有艺术家节点构成的数组，getImage仅支持传入单个图片节点，无法识别数组
• 遍历艺术家节点时未解构每个节点的image字段，无法获取对应艺术家的头像数据

你已经安装了gatsby-transformer-json且已经将src/data目录配置为资源目录，artists.json会自动生成可查询的节点，不需要手动写sourceNodes创建所有节点，按以下步骤修改即可：

步骤1：修改gatsby-node.js配置 #

删除原有exports.sourceNodes代码，替换为以下解析器配置，自动关联艺术家头像和对应图片文件：

const path = require(`path`)
const { createFileNode } = require("gatsby-source-filesystem")

exports.createResolvers = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  createResolvers({
    // 自动生成的artists.json节点类型，和文件名对应
    ArtistsJson: {
      headshot: {
        type: `File`,
        resolve: async (source) => {
          const imagePath = path.join(__dirname, "src/images/artists/headshots/", source.image)
          return createFileNode({
            path: imagePath,
            createNode,
            createNodeId,
            cache,
            store,
            reporter,
          })
        },
      },
    },
  })
}

步骤2：修改页面GraphQL查询 #

在渲染ArtistsPage的页面组件中修改查询语句，获取处理后的图片数据：

query MyQuery {
  allArtistsJson {
    nodes {
      firstName
      lastName
      city
      currentTeam
      headshot {
        childImageSharp {
          gatsbyImageData(width: 300, placeholder: BLURRED)
        }
      }
    }
  }
}

步骤3：修改ArtistsPage组件代码 #

import React from 'react'
import PropTypes from 'prop-types'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
import { useStyles } from './styles'

const ArtistsPage = ({ artists }) => {
  const classes = useStyles()
  return (
    <div className={classes.flexContainer}>
      {artists.allArtistsJson.nodes.map((artist, idx) => {
        // 在循环内部获取当前单个艺术家的图片
        const image = getImage(artist.headshot)
        // 你的JSON里firstName和lastName是数组，需取第一个元素
        const fullName = `${artist.firstName[0]} ${artist.lastName[0]}`.toUpperCase()
        return (
          <div className={classes.flexItem} key={idx}>
            <div>
              <GatsbyImage image={image} alt={`${fullName}头像`} />
            </div>
            <div className={classes.artistCardName}>
              {fullName}
            </div>
            <div className={classes.artistCardText}>{artist.city}</div>
            <div className={classes.artistCardText}>{artist.currentTeam}</div>
          </div>
        )
      })}
    </div>
  )
}

ArtistsPage.propTypes = {
  artists: PropTypes.shape({
    allArtistsJson: PropTypes.shape({
      nodes: PropTypes.arrayOf(PropTypes.object)
    })
  }).isRequired,
}
export default ArtistsPage

步骤4：验证修改 #

删除项目根目录的.cache和public文件夹，重启开发服务即可。

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