图像未在 NetlifyCMS 和 GatsbyJS 上显示

Question

我无法在使用 NetlifyCMS 和 GatsbyJS 的博客上使用图片我不确定自己做错了什么。

这是我的 NetlifyCMS 配置

 backend:
      name: git-gateway
      branch: master
    publish_mode: editorial_workflow
   media_folder: '../common/src/assets/images/uploads'
   #public_folder: '../common/src/assets/images/uploads'

Collections 篇文章

folder: 'packages/common/src/articles'

CMS 的 Gasbyjs 配置

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `articles`,
        path: `../common/src/articles`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `../common/src/assets/images/uploads`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `common-images`,
        path: `../common/src/assets/images/uploads`
      }
    },

我的 gatsby 文件配置

{
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `common`,
        path: `../common/src/assets/`
      }
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `../common/src/data/`
      }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `../common/src/assets/images/favicon.png` // This path is relative to the root of the site.
      }
    },

和我的项目文件夹

Answer 1

更改 config.yml 路径来自：

 backend:
   name: git-gateway
   branch: master
   publish_mode: editorial_workflow
   media_folder: '../common/src/assets/images/uploads'
   #public_folder: '../common/src/assets/images/uploads'

类似于：

   name: git-gateway
   branch: master
   publish_mode: editorial_workflow
   media_folder: 'static/assets/images/uploads'
   public_folder: '/assets/images/uploads'

注意：在这些媒体配置中我几乎不会避免相对路径。当然，根据您的需要进行调整，但保留 media_folder 的 /static 文件夹和 public_folder. 开头的斜杠 (/)

您将需要使用 static folder approach since it's the only way to make external images be accessible from /public folder requests, as you can see in the guide provided by Netlify:

media_folder: static/img
public_folder: /img

图像未在 NetlifyCMS 和 GatsbyJS 上显示

Images not showing on NetlifyCMS and GatsbyJS

gatsby

netlify

netlify-cms

gatsby-image