Question

好的，我对JAMstack，React，GatsbyJS，NetlifyCMS和Netlify还是很陌生，所以如果这很简单，请原谅我。

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

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

有时会出现，但是在推送或拉动或重新启动Gatsby开发服务器后，它只是再次中断。

这似乎仅在通过NetlifyCMS将图像添加到主体内容中时出现，从而使其出现在markdown文件的主要内容中；处于首要位置时，它似乎工作正常。

看来，我已经花了很多时间。我已经安装了所有插件，而且似乎找不到其他人遇到此问题。

所有其他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

调用了页面模板：

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

我希望将图像添加到markdown主体中，以便Gatsby处理该图像并将其输出为已处理/模糊的加载图像，并使其在所有服务器（本地主机和Netlify）上均能正常工作。

相反，当它最初输出（有时）时，它是一个巨大的图像，打破了容器，然后在服务器重新启动或类似的操作之后，图像就破裂了。

Answer 1

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

使用NetlifyCMS的本地主机和Netlify之间的图像中断

1 个答案: