使用NetlifyCMS在localhost和Netlify之间断开图像

Question

好吧，我对JAMstack，React，GatsbyJS，NetlifyCMS和Netlify都很陌生，如果这很简单，请原谅我。

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

当我通过NetlifyCMS将图像添加到任何页面的正文部分时，我然后拉回了图像，图像根本没有出现，并被替换为损坏的图像图标。但是，在Netlify上似乎工作正常。

偶尔会出现这种情况，但是在推动或拉动或重新启动Gatsby开发服务器后，它会再次中断。

只有在通过NetlifyCMS将图像添加到正文内容中时才会出现这种情况，因此它出现在markdown文件的主要内容中;它在前面看起来似乎工作得很好。

我似乎花了很多时间。我已经安装了全系列的插件，我似乎找不到其他任何面临这个问题的插件。

所有其他HTML似乎工作正常，但这些图像真的不想。

盖茨比-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

在页面模板上调用：

<PageContent className="content" content={content} />

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

相反，当它最初输出（有时）时，它是一个巨大的图像，突破容器，然后在服务器重启或类似的情况下，图像就会中断。

Answer 1

事实证明，这是我运行的Netlify CMS版本中的一个小错误 - 我从2.6.1更新到2.8.0，这解决了问题（截至2.7.0）。