Netlify CMS无法更新/替换已在Gatsby.js中优化的图像

Question

从我的降价文件中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类型为“字符串”。在中index.md，即使更改image1: /img/City-Picture.jpg为图片的相对路径（image1: ../..static/img/City-Picture.jpg），我仍然会遇到相同的错误。

当然，我希望保留它，/img/City-Picture.jpg因为只有这样才能在Netlify CMS中进行图像更新。在config.ymlNetlify 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。

如果可能的话，我更希望两全其美。任何对此的见解将不胜感激。

Answer 1

实际上，我刚刚将 Netlify CMS 替换为 Contentful CMS（免费套餐）。在 Contentful CMS 中处理图像要容易得多。为此，我查看了有关使用 Contentful CMS 设置 Gatsby 的优秀教程。