时间戳

首页 > 解决方案 > Netlify CMS 无法更新/替换已在 Gatsby.js 中优化的图像

reactjs - 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是“字符串”类型。在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.

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

标签： reactjsgraphqlnetlify-cms

解决方案

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

推荐阅读