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-源文件系统实例，指向文件系统的不同部分

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`
 ],
}

目录外的图像导致字段“ image”必须没有选择，因为类型“ String”没有子字段

1 个答案: