Netlify CMS не может обновить / заменить изображение, оптимизированное в Gatsby.js

Из моего файла уценки index.md, ...

---
templateKey: home-page/index
image1: /img/City-Picture.jpg
---

... Я хочу сделать оптимизированный image1 доступным для graphql здесь, в templates/index.js ...

export const homePageQuery = graphql`
  query HomePage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        welcome_description
        image1 {
          childImageSharp {
            sizes(maxWidth: 590) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
 }

Но я получаю эту ошибку в терминале ...

GraphQL Error Field "image1" must not have a selection since type "String" has no subfields.
2 |   query HomePage($id: String!) {
3 |     markdownRemark(id: { eq: $id }) {
4 |       frontmatter {
5 |         welcome_description
6 |         image1 {
  |                ^
7 |           childImageSharp {
8 |             sizes(maxWidth: 590) {
9 |               ...GatsbyImageSharpSizes
10|             }
11|           }
12|         }
13|       }
14|     }

(Я не получу его ошибки, если воздержусь от оптимизации image1.)

В gatsby-config.js эти плагины размещены перед gatsby-source-filesystem ...

`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,

Я не уверен, почему GraphQL считает image1 типом String. В index.md, даже если я изменю image1: /img/City-Picture.jpg на относительный путь к изображению (image1: ../..static/img/City-Picture.jpg), я все равно получаю ту же ошибку.

Конечно, я бы предпочел оставить его на /img/City-Picture.jpg, потому что только это будет работать в Netlify CMS для обновления изображений. В config.yml для Netlify CMS у меня есть ...

media_folder: static/img
public_folder: /img

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

Я попытался реализовать недавно созданный плагин gatsby-remark-relative-images, который предназначен для компенсации неспособности Netlify CMS использовать относительные пути, но мне не удалось заставить его работать.

На https://github.com/netlify/netlify-cms/issues/325 идет активное обсуждение этого вопроса, но пока мне не удалось заставить работать ни одно из решений.

На данный момент у меня есть дилемма из двух несовершенных вариантов: 1. Имея возможность редактировать изображения в Netlify CMS, но не имея возможности оптимизировать эти изображения с помощью gatsby-image. 2. Отсутствие возможности редактировать изображения в Netlify CMS, но затем возможность оптимизировать эти изображения с помощью gatsby-image.

Я бы предпочел по возможности использовать лучшее из обоих миров. Мы будем очень благодарны за любые идеи по этому поводу.

Описание вашего вопроса неоднозначно. 1. Вы упоминаете о проблеме с graphql. 2. Вы имеете в виду проблему на GitHub, связанную с загрузкой изображений. 3. Вы говорите об оптимизации изображений.

Yashu Mittal 19.09.2018 16:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
5
1
955
2

Ответы 2

На самом деле я только что заменил свою Netlify CMS на Contentful CMS (бесплатный уровень). В Contentful CMS намного проще работать с изображениями. Для этого я просмотрел отличный учебник по настройке Gatsby с Contentful CMS.

По вопросу:

Netlify CMS not able to update/replace image that has been optimized in Gatsby.js

Вот как работает поток:

  1. Изменения, внесенные в NetlifyCMS
  2. Изменения запускают сборку
  3. Гэтсби начинает

... (и сделайте так, как указано в файле config.yml)

NetlifyCMS не работает таким образом, он только извлекает данные из репозитория .git и отображает их в пользовательском интерфейсе.

В то время как Гэтсби начинает работать, когда изменения зафиксированы, и вся работа была сделана Гэтсби, (преобразование файлов уценки, оптимизация изображений) находится на сервере.

Поскольку Gatsby не фиксирует никаких изменений в репозитории, NetlifyCMS ничего не знает об оптимизации изображений или преобразовании файлов разметки в файлы .html.

Другие вопросы по теме