Gatsby中无childImageSharp字段的图片如何优化并使用GatsbyImage

以下是3种可直接落地的解决方法：

方案1：使用gatsby-plugin-remote-images插件（最简便） #

该插件会自动将节点内的远程图片URL转换为Gatsby可处理的File节点，自动生成childImageSharp相关字段：

• 第一步安装所需依赖

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

• 第二步在gatsby-config.js中添加配置

module.exports = {
  plugins: [
    // 你的其他原有插件配置
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-remote-images`,
      options: {
        nodeType: 'TribeEvents', // 对应gatsby-source-tribe-events返回的活动节点类型，可在GraphiQL中查询确认
        imagePath: 'image.url', // 替换为你当前查询到的图片URL对应的字段路径
        name: 'optimizedImage', // 自定义生成的可处理图片字段名
      },
    },
  ]
}

• 第三步修改GraphQL查询语句，即可获取优化图片字段

query {
  allTribeEvents {
    nodes {
      title
      date
      description
      optimizedImage {
        childImageSharp {
          gatsbyImageData(width: 800, formats: [AUTO, WEBP, AVIF])
        }
      }
    }
  }
}

• 第四步在组件中使用GatsbyImage渲染即可

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

const EventCard = ({ event }) => {
  const image = getImage(event.optimizedImage)
  return (
    <div className="event-card">
      <h3>{event.title}</h3>
      <GatsbyImage image={image} alt={event.title} />
      <div dangerouslySetInnerHTML={{__html: event.description}} />
    </div>
  )
}

方案2：手动通过Gatsby节点API添加字段（无需额外插件） #

如果你不想安装第三方插件，可以直接在gatsby-node.js中通过Gatsby原生API实现远程图片处理：

const { createRemoteFileNode } = require("gatsby-source-filesystem")

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  createTypes(`
    type TribeEvents implements Node {
      optimizedImage: File @link(from: "fields.optimizedImage")
    }
  `)
}

exports.onCreateNode = async ({ node, actions, createNodeId, getCache }) => {
  const { createNodeField, createNode } = actions
  // 匹配活动节点且存在图片URL时执行处理
  if (node.internal.type === "TribeEvents" && node.image?.url) {
    const fileNode = await createRemoteFileNode({
      url: node.image.url,
      parentNodeId: node.id,
      createNode,
      createNodeId,
      getCache,
    })
    if (fileNode) {
      createNodeField({
        node,
        name: "optimizedImage",
        value: fileNode.id,
      })
    }
  }
}

配置完成后查询和渲染逻辑和方案1完全一致。

临时方案：使用StaticImage兜底 #

如果只有少量固定图片需要渲染，可以直接使用StaticImage组件，但该方案不支持动态传入图片路径，仅适合临时应急使用。

注意事项 #

修改配置后需要执行gatsby clean && gatsby develop清空缓存重启服务，否则旧的节点缓存不会更新，新字段无法生成。

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