好的，我对 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 处理图像并将其输出为处理/模糊加载图像，并使其在所有服务器（localhost 和 Netlify）上一致地工作。
相反，当它最初（有时）输出时，它是一个巨大的图像，从容器中分离出来，然后在服务器重新启动或类似的情况下，图像就会中断。