Reactjs 使用NetlifyCMS在本地主机和Netlify之间断开映像

好的，我对JAMstack、React、GatsbyJS、NetlifyCMS和Netlify都是新手，如果这很简单，请原谅我

我有一个使用React和GatsbyJS运行的网站，也有NetlifyCMS运行来控制内容。在大多数情况下，该网站运行良好，但是当涉及到不同环境之间的图像时，我一直遇到一个问题

当我通过NetlifyCMS将图像添加到任何页面的正文部分时，我会拉取repo，该图像根本不会出现，并替换为损坏的图像图标。然而，在Netlify上它似乎工作得很好

偶尔会出现这种情况，但在推、拉或重新启动Gatsby develop服务器后，它又会崩溃

只有通过NetlifyCMS将图像添加到正文内容中，使其出现在标记文件的主要内容中时，才会出现这种情况；当面对现实时，它似乎工作得很好

看来我已经花了很多时间在这上面了。我已经安装了各种各样的插件，我似乎找不到任何其他人面临这个问题

所有其他HTML似乎都可以正常工作，但这些图像确实不想这样

gatsby config.js

  siteMetadata: {
    title: 'Sheringham Shantymen',
    description: 'The Shantymen travel widely throughout the UK and Ireland supporting Lifeboat Stations in their fundraising efforts and are always considering how they can help in others to raise funds by performing concerts.',
  },
  plugins: [
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
        "gatsby-remark-copy-linked-files",
        "gatsby-plugin-netlify-cms-paths",
          {
            resolve: 'gatsby-remark-relative-images',
            options: {
              name: 'uploads',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 1600,
            },
          }
        ],
      },
    },
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/img`,
        name: 'images',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/gigs`,
        name: 'gigs',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/discography`,
        name: 'discography',
      },
    },
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Source Sans Pro', 'Source Serif Pro']
        }
      }
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "Sheringham Shantymen",
        short_name: "Shantymen",
        start_url: "/",
        background_color: "#172957",
        theme_color: "#FAC43E",
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: "standalone",
        icon: "src/img/logo-badge.png", // This path is relative to the root of the site.
      },
    },
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    {
      resolve:'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
      options: {
        develop: true,            // Activates purging in npm run develop
        purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
      },
    }, // must be after other CSS plugins
    'gatsby-plugin-netlify', // make sure to keep it last in the array
  ],
}

Content.js组件

import PropTypes from 'prop-types'

export const HTMLContent = ({ content, className }) => (
  <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
)

const Content = ({ content, className }) => (
  <div className={className}>{content}</div>
)

Content.propTypes = {
  content: PropTypes.node,
  className: PropTypes.string,
}

HTMLContent.propTypes = Content.propTypes

export default Content

从“道具类型”导入道具类型
export const HTMLContent=（{content，className}）=>(
)
常量内容=（{Content，className}）=>(
{content}
)
Content.propTypes={
内容：PropTypes.node，
类名：PropTypes.string，
}
HTMLContent.propTypes=Content.propTypes
导出默认内容

在页面模板上调用：

我希望在markdown的主体中添加一个图像，以便Gatsby处理该图像并将其输出为已处理/模糊加载的图像，并使其在所有服务器（localhost和Netlify）上一致工作

---

相反，当它最初（有时）输出一个巨大的映像时，它会从容器中分离出来，然后在服务器重新启动或类似操作后，映像会简单地断裂。

结果表明，这是我运行的Netlify CMS版本中的一个小错误-我从2.6.1更新到了2.8.0，并且修复了这个问题（从2.7.0开始）