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

Posted 2023-03-08

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

【英文标题】：Netlify CMS not able to update/replace image that has been optimized in Gatsby.js

【发布时间】：2018-11-26 03:24:18

【问题描述】：

来自我的降价文件index.md，...

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

...我想在templates/index.js 中为graphql 提供优化的image1...

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 中用于图像更新。在 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 优化这些图片。

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

【问题讨论】：

您的问题描述参差不齐。 1.您提到的是graphql问题。 2.你指的是GitHub上关于上传图片的问题。 3. 你说的是优化图片。

【参考方案1】：

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

【参考方案2】：

根据问题：

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

以下是流程的工作原理：

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

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

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

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

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