Изображение Gatsby с Netlify CMS - изображение поля не должно иметь выделения, поскольку тип String не имеет подполей

Я создаю блог-сайт с помощью Gatsby и использую Netlify CMS для управления своим контентом. У каждого сообщения в блоге есть избранное изображение, указанное в аннотации.

Но у меня возникли проблемы с отображением этих изображений. Я все время получаю эту ошибку:

GraphQL Error Field "image" must not have a selection since type "String" has no subfields.

Я попытался добавить gatsby-remark-relative-images, чтобы попытаться исправить это, но это не работает - я все равно получаю ту же ошибку.

Любые идеи о том, как это исправить?

Структура каталогов

content
 - articles
public
src
static
 - admin
 - images

Frontmatter

---
title: Post 1
image: img.png
---

gatsby-config.js

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: `${__dirname}/static/images`,
    }
  },
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `content`,
      path: `${__dirname}/content`,
    }
  },
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-relative-images`,
        },
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 590,
          },
        },
      ],
    },
  },
  `gatsby-transformer-sharp`,
  `gatsby-plugin-sharp`,
  `gatsby-plugin-netlify-cms`,
  `gatsby-plugin-sitemap`
]

gatsby-node.js

const path = require('path');

const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');


exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)

  if (node.internal.type === `MarkdownRemark`) {

    const slug = createFilePath({ node, getNode, basePath: `pages` })

    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

exports.createPages = ({actions, graphql}) => {
  const {createPage} = actions;

  return graphql(`{
    allMarkdownRemark {
      edges {
        node {
          html
          id
          frontmatter {
            title
            date
            templateKey
          }
          fields {
            slug
          }
        }
      }
    }
  }`)
  .then(res => {
    if (res.errors) {
      return Promise.reject(res.errors);
    }

    res.data.allMarkdownRemark.edges.forEach(({node}) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve(
          `src/templates/${String(node.frontmatter.templateKey)}.js`
        ),
        context: {
          // Data passed to context is available
          // in page queries as GraphQL variables.
          slug: node.fields.slug,
        },
      })
    })

  })
}

person taylor018    schedule 15.05.2019    source источник
comment
Привет, @ taylor018, раз уж вы используете netlifyCMS, вы используете виджет изображений для выбора и загрузки изображений? если да, не могли бы вы поделиться соответствующей частью в config.yml?   -  person Derek Nguyen    schedule 17.05.2019


Ответы (4)


Хотя ответ от @issydennis может помочь. Не забудьте трижды проверить путь и имя вашего изображения, если изображение, которое вы установили в определении содержимого, не совпадает с фактическим изображением, вместо этого Gatsby предложит эту ошибку Изображение не найдено.

person Alexis Duran    schedule 20.09.2019

Я последовал этому руководству и преуспел в последних версиях Gatsby и netlify. https://blog.rousek.name/2018/08/10/cool-image-loading-with-gatsbyjs-v2-and-netlify-cms-v2/. В основном вам нужно использовать gatsby-plugin-netlify-cms-paths. Это позволит Graphql иметь возможность запрашивать изображение, потому что в Netlify поле изображения является типом строки. Цитата автора плагина гласит: «Плагин Gatsby для изменения путей к файлам в ваших файлах уценки на пути, удобные для Gatsby, при использовании Netlify CMS для их редактирования».

В качестве альтернативы, если вы по-прежнему предпочитаете использовать gatsby-comment-relative-images, вам необходимо добавить

// gatsby-node.js
 const { fmImagesToRelative } = require('gatsby-remark-relative-images');

  exports.onCreateNode = ({ node }) => {
  fmImagesToRelative(node);
  };
person Thien Ly    schedule 23.05.2019

Попробуйте очистить кеш, используя:

gatsby clean

И затем снова запускаем сервер разработки.

Я часто получаю эту ошибку случайно, когда работаю с той же настройкой, что и вы. Обычно это исправляет очистка кеша и перезапуск.

person issydennis    schedule 29.05.2019

Легче всего сразу перейти к документации Gatsby для gatsby-plugin-netlify-cms-paths

https://www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms-paths/

Одно предостережение ... В вашем config.yml файле должны быть указаны как media_folder, так и public_folder. Однако, согласно документации Netlify CMS:

Если public_folder не установлен, Netlify CMS по умолчанию использует то же значение, что и media_folder, добавляя открытие / если оно не включено.

Когда Netlify CMS выполняет свои функции по умолчанию, моя первоначальная сборка Netlify после установки и настройки плагина завершилась ошибкой со следующей ошибкой:

ошибка Отсутствует public_folder в конфигурации Netlify CMS

После ручного добавления public_folder в мой config.yml файл у меня больше не было проблем.

person Will Ward    schedule 06.07.2020