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是＆＃34;字符串＆＃34;。在index.md中，即使我将image1: /img/City-Picture.jpg更改为图片的相对路径（image1: ../..static/img/City-Picture.jpg），我仍然会遇到相同的错误。

当然，我更愿意将其保留在/img/City-Picture.jpg，因为只有这样才能在Netlify CMS中进行图像更新。在Netlify CMS的config.yml中，我有......

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

我实际上只是用Contentful CMS（免费套餐）替换了我的Netlify CMS。 Contentful CMS使用图像更加容易。为此，我查看了使用Contentful CMS设置Gatsby的excellent tutorial。

Answer 2

根据问题：

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

这是流程的工作方式：

在NetlifyCMS中所做的更改
更改触发构建
盖茨比加入

... （并按照config.yml文件中的说明进行操作）

NetlifyCMS无法以这种方式工作，它只能从.git存储库中获取数据并在UI中显示。

在提交更改后，盖茨比开始工作，而所有工作由盖茨比完成（转换降价文件，优化图像）在服务器上。

由于Gatsby不会对存储库进行任何更改，因此NetlifyCMS对优化图像或将markdown文件转换为.html文件一无所知。

Netlify CMS无法更新/替换已在Gatsby.js

2 个答案: