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

Question

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

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

当我通过 NetlifyCMS 将图像添加到任何页面的正文部分时，然后我拉回回购图像根本就没有出现，而是被损坏的图像图标所取代。但是，它在 Netlify 上似乎工作正常。

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

似乎只有在通过 NetlifyCMS 添加图像到正文内容时才会发生，因此它出现在 markdown 文件的主要内容中；它在 frontmatter 中似乎工作正常。

我似乎在这上面花了很多时间。我已经安装了所有插件，但我似乎找不到其他人遇到这个问题。

所有其他 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 处理图像并将其输出为 processed/blur 上传图像，并使其在所有服务器（本地主机和 Netlify）上一致地工作).

相反，当它最初（有时）输出时，它是一个巨大的图像，从容器中脱离出来，然后在服务器重启或类似的情况下图像简单地破坏。

Answer 1

原来这是我使用的 Netlify CMS 版本中的一个小错误运行 - 我从 2.6.1 更新到 2.8.0，这已经解决了这个问题（从 2.7.0 开始）。

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

Images breaking between localhost and Netlify using NetlifyCMS

reactjs

gatsby

netlify

netlify-cms

jamstack