Gatsby中StaticImage组件为何不接收点语法传入的src属性值

代码示例差异与失效原因 #

StaticImage 是 gatsby-plugin-image 提供的构建时预处理组件，要求传入的 src 属性必须是构建阶段可直接静态解析的固定值，所有图片路径都会在打包阶段提前扫描提取，不会在客户端运行时动态计算。

两个写法的核心区别是构建阶段的可解析性：

• 第一种写法的imageSrc是组件顶层直接声明的字符串常量，Gatsby的构建扫描逻辑可以直接识别到固定路径值，提前处理对应图片资源，因此可以正常运行。
• 第二种写法的data.imageSrc是对象嵌套属性引用，Gatsby的静态扫描逻辑不支持解析这种嵌套取值的表达式，无法在构建阶段确定src的具体值，因此会失效。

点语法的属性说明 #

点语法不属于函数，它是JavaScript内置的属性访问运算符，作用是读取对象对应键的属性值，属于取值表达式的一种，不属于函数调用范畴。

补充使用建议 #

如果需要传入动态计算的图片路径，不要使用StaticImage，改为使用GatsbyImage组件，配合GraphQL查询返回的图片数据传入即可。

import React from 'react'
import { GatsbyImage } from "gatsby-plugin-image"

export default function Demo({ queriedImageData }) {
  // queriedImageData 为GraphQL查询返回的图片处理结果
  return <GatsbyImage image={queriedImageData} alt="alt text" />
}

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