Изображения вне директории причина Поле "изображение" не должно иметь выбор, так как тип "Строка" не имеет подполей

Question

Я использую Gatsby для добавления изображений на свой сайт. Вот как я хочу настроить каталог изображений.

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

Проекты. Файл json - это место, где я определяю расположение изображений вместе с другими атрибутами, такими как название проекта и т. Д. c.

Однако при этой настройке я получаю эту ошибку: Field "image" must not have a selection since type "String" has no subfields. Я также получаю эту ошибку, если я просто помещаю изображение в каталог sr c и ссылаюсь на него как ../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`
  ],
}

Я могу получить доступ к изображениям, если переместу все мои фотографии в каталог данных, где у меня есть проекты. json файл и ссылаться на них как ./project1.png.

Answer 1

Вы должны добавить еще одну gatsby-source-filesystem и указать ее в папке, содержащей изображения. Ваш gatsby-config. js может содержать столько экземпляров gatsby-source-file system, сколько вам нужно, указывая на разные части вашей файловой системы

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