目录外的图像导致字段“图像”不能有选择，因为类型“字符串”没有子字段

Question

我正在使用 Gatsby 向我的网站添加图像。这就是我想要设置图像目录的方式。

$PROJECT
- src
-- images
--- projects
---- project1
----- project1.png
-- data
--- projects.json

projects.json 文件是我定义图像位置以及项目标题等其他属性的地方。

但是，通过此设置，我收到此错误： Field "image" must not have a selection since type "String" has no subfields. 如果我只是将图像放在 src 目录中并将其引用为../project1.png，我也会收到此错误。我已经查看了此错误的所有 Google 结果并尝试了他们的修复。这包括重新排序导入、添加转换器备注、删除空字段以及检查目录和文件名是否正确（它们是正确的，我通过从 GraphQL 获取“字符串”并运行 test -F <the path> 来检查所有这些都来自返回为真。

这是我的 gatsby-config 设置：

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

如果我将所有照片移动到我拥有 projects.json 文件的数据目录并像 ./project1.png 一样引用它们，我就可以访问这些图像。

Answer 1

您必须添加另一个 gatsby-source-filesystem 并将其指向包含图像的文件夹。您的 gatsby-config.js 可以包含任意数量的 gatsby-source-file 系统实例，指向文件系统的不同部分

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