好的，我对JAMstack，React，GatsbyJS，NetlifyCMS和Netlify很陌生，所以如果这很简单，请原谅我。
我有一个使用 React 和 GatsbyJS 运行的网站，并且也运行 NetlifyCMS 来控制内容。在大多数情况下，该网站运行良好，但是当涉及到不同环境之间的图像时，我一直遇到问题。
当我通过NetlifyCMS将图像添加到任何页面的正文部分时，我拉取回购，图像根本不显示，并替换为损坏的图像图标。但是，在Netlify上它似乎工作正常。
偶尔，它会出现，但是在推送或拉取或重新启动Gatsby开发服务器后，它只是再次中断。
它似乎只发生在通过NetlifyCMS将图像添加到正文内容中，因此它出现在markdown文件的主要内容中;它在前言中似乎工作正常。
我似乎花了很多时间在这上面。我已经安装了全系列的插件，我似乎找不到其他面临此问题的人。
所有其他HTML似乎都可以正常工作，但这些图像真的不想。
盖茨比配置.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
],
}
内容.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)上一致地工作。
相反，当它最初(有时)输出时，它是一个巨大的图像，脱离容器，然后在服务器重新启动或类似之后，图像只是中断。
事实证明，这是我运行的Netlify CMS版本中的一个小错误 - 我从2.6.1更新到2.8.0，这已经解决了这个问题(从2.7.0开始)。