gatsby-plugin-image的StaticImage组件无法显示本地导入图片问题

问题原因 #

该报错由StaticImage组件的构建解析规则导致：
StaticImage的src属性仅支持传入字符串字面量形式的路径/链接，不支持接收任何变量（包括提前导入的静态资源变量）。该组件会在构建阶段直接解析src的字符串值定位资源，不会执行变量值读取逻辑，因此传入导入的laptop变量时，插件无法识别实际的图片路径，抛出对应报错。
远程网络图片可以正常加载，是因为StaticImage对http/https开头的远程链接不需要做本地文件路径解析，只要是字符串形式的有效链接即可正常处理。

解决方案 #

两种方案均可修复该问题：

• 方案1：保留StaticImage用法，移除图片导入逻辑，直接传入相对于当前组件文件的本地图片相对路径字符串，注意不能使用配置的路径别名（如@images），别名在构建静态解析阶段无法被识别。
  示例代码：

  import { StaticImage } from 'gatsby-plugin-image';
  
  // 此处路径为当前组件文件到laptop.png的真实相对路径
  <StaticImage src="../images/laptop.png" alt="laptop" />
  

• 方案2：如果需要使用路径别名或者动态控制图片资源，直接使用已验证可用的GatsbyImage组件，配合静态查询获取图片的gatsbyImageData渲染即可。

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