5

从我的降价文件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.

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

4

2 回答 2

2

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

于 2018-06-18T13:32:58.590 回答
0

根据问题：

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

以下是流程的工作原理：

  1. NetlifyCMS 中所做的更改
  2. 更改触发构建
  3. 盖茨比出场

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

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

而 Gatsby 在提交更改时开始工作，并且所有工作都由 Gatsby 完成（转换 markdown 文件、优化图像）在服务器上。

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

于 2018-09-19T14:03:27.233 回答