使用GatsbyImage时图片无法渲染的技术求助

问题现象 #

使用GatsbyImage渲染茶食谱页面图片时，控制台显示imageNode为undefined，recipeImage为null，图片无法正常显示。

相关代码 #

页面组件（10-tea-recipes.js） #

<div className="space-y-8">
  {teaRecipes.map((recipe) => {
    const imageNode = allFile.find(file => file.name === recipe.image); // Match by name
    const recipeImage = imageNode ? getImage(imageNode.childImageSharp) : null; // Get image data
    return (
      <div key={recipe.id} className="border-b pb-8">
        {recipeImage && (
          <GatsbyImage image={recipeImage} alt={recipe.title} className="w-full h-64 object-cover mb-4" />
        )}
        <h3 className="text-2xl font-bold mb-2">{recipe.id.toString().padStart(2, '0')}  {recipe.title}</h3>
        <p className="mb-4">{recipe.description}</p>
        <SecondaryButton to={`/tea-recipe/${recipe.id}`}>
          GET THE RECIPE
        </SecondaryButton>
      </div>
    )
  })}
</div>

GraphQL查询（10-tea-recipes.js） #

export const query = graphql`
  query {
    allTeaRecipe {
      nodes {
        id
        title
        description
        image
      }
    }
    allFile {
      nodes {
        name
        publicURL
        childImageSharp {
          gatsbyImageData
        }
      }
    }
  }
`;

数据来源（teaRecipe.mjs） #

export const teaRecipes = [
  {
    id: 1,
    title: "Spring: Lavender Earl Grey Latte",
    description: "A perfect way to welcome the warmer weather with floral notes of lavender combined with the robust flavor of Earl Grey.",
    image: "lavendar_latte.webp", 
    ingredients: [
      "1 cup of hot water",
      "1 Earl Grey tea bag",
      "1 tsp dried lavender",
      "1/2 cup steamed milk (or a dairy-free alternative)",
      "1-2 tsp honey or your preferred sweetener"
    ],
    instructions: [
      "Brew the Earl Grey tea in hot water, adding the dried lavender.",
      "Let it steep for 5-7 minutes, then strain.",
      "Pour the tea into a mug, add honey, and top with steamed milk.",
      "Garnish with a sprinkle of lavender buds if desired."
    ]
  },
];

项目配置（gatsby-config.js） #

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
    'gatsby-plugin-postcss',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'data',
        path: `${__dirname}/src/data/`,
      },
    },
  ],
}

控制台日志 #

All Files: (8) ['basil_iced_tea', 'chai_cider', 'hot_chocolate', 'pumpkin_latte', 'macha_lemonade', 'habiscus_tea', 'lavendar_latte', 'teaRecipe']0: "basil_iced_tea"1: "chai_cider"2: "hot_chocolate"3: "pumpkin_latte"4: "macha_lemonade"5: "habiscus_tea"6: "lavendar_latte"7: "teaRecipe"length: 8[[Prototype]]: Array(0)
10-tea-recipes.js:29 Image Node: undefined
10-tea-recipes.js:31 Recipe Image Data: null
10-tea-recipes.js:26 Recipe Image: ../images/macha_lemonade.webp

问题原因与解决方法 #

核心问题 #

从控制台日志可见，allFile返回的文件name是不带后缀的纯文件名（如lavendar_latte），但食谱数据中image字段是带扩展名的完整文件名（如lavendar_latte.webp），导致匹配逻辑完全不匹配，返回undefined。

修复步骤 #

修改页面组件中的文件名匹配逻辑，移除recipe.image的扩展名后再与file.name对比：

// 原代码
const imageNode = allFile.find(file => file.name === recipe.image);

// 修改后
const imageNode = allFile.find(file => file.name === recipe.image.split('.')[0]);

额外验证建议 #

• 确认src/images/目录下存在对应文件名的图片（如lavendar_latte.webp），且文件名拼写与数据中完全一致（注意大小写）
• 若图片仍无法渲染，可重启Gatsby开发服务并清理缓存（执行gatsby clean再gatsby develop）

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