Gatsby+Netlify CMS博客图片无法加载问题求助

以下是针对你遇到的图片无法显示问题的排查和修复步骤：

1. 修正Netlify CMS的媒体路径配置 #

打开static/admin/config.yml，检查media_folder和public_folder的设置是否正确。正确的配置应该是：

media_folder: "static/images/uploads"  # 图片在项目中的存储目录
public_folder: "/images/uploads"       # 前端页面访问图片的路径前缀

如果之前的media_folder没加static/前缀，Gatsby不会将该目录识别为静态资源目录，导致构建时图片未被打包到输出文件夹，最终前端访问出现404。

2. 更新已发布博文的图片链接 #

Netlify CMS后台预览时的blob:开头的URL是临时预览链接，发布后不会生效。需要找到content/blog下对应博文的markdown文件，将图片链接替换为/images/uploads/[图片文件名]的格式，比如：

![图片描述](/images/uploads/sample-image.jpg)

3. 配置Gatsby识别图片资源 #

确保gatsby-source-filesystem插件已正确配置，让Gatsby能扫描到图片目录。在gatsby-config.js中添加或修改如下配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `uploads`,
        path: `${__dirname}/static/images/uploads`,
      },
    },
    // 其他已有的插件配置...
  ],
}

4. 重新构建并部署 #

• 本地执行gatsby clean && gatsby build，检查public/images/uploads目录下是否存在上传的图片文件。
• 确认本地构建正常后，将代码推送到Git仓库，触发Netlify自动重新部署，部署完成后前端页面即可正常加载图片。

内容的提问来源于stack exchange，提问作者neelmeg