Gatsby 图像不适用于 Netlify CMS 中的列表小部件

Question

我在使用 Gatsby 和 Netlify CMS 网站时遇到了一个奇怪的问题。

我正在使用 gatsby-remark-relative-images 来使用从 Netlify CMS 获取的图像和 gatsby-image。它对于直接位于 frontmatter 内部的图像小部件非常有效。但是，它不适用于列表小部件内的图像小部件。对于直接在 frontmatter 内部的图像，我可以使用 Gatsby 的childImageSharp 查询。但是，列表小部件内的图像只返回一个字符串数组，这些字符串是图像的相对路径。

这是我的代码。

config.yml

backend:
  name: github
  repo: my/repo
media_folder: static/assets
public_folder: /assets
publish_mode: editorial_workflow
collections:
  - name: 'projects'
    label: 'Projects'
    folder: 'src/pages/projects'
    create: true
    fields:
      - { name: title, label: Title }
      - { name: priority, label: Priority, widget: number, default: 0, valueType: int }
      - { name: category-type, label: Media Type, widget: select, options: ['Web', 'Mobile'] }
      - { name: thumbnail, label: Thumbnail Image, widget: image }
      - { name: thumbnail-subtitle, label: Thumbnail Subtitle, widget: string }
      - { name: main-images, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }
      -   name: app-links
          label: App or Website Links
          widget: list
          required: false
          fields:
            - name: app-link
              label: App or Website Link
              widget: object
              fields:
                - { name: url, label: URL, wdget: string }
                - { name: link-type, label: Media Type, widget: select, options: ['iOS', 'Android', 'Web'] }
      - { name: github-link, label: Github Link, widget: string, required: false }
      - { name: about, label: About this project, widget: markdown }
      - { name: technologies, label: Technologies, widget: list, field: { name: technology, label: Technology Name, widget: string } }
      - { name: extra-images, label: Extra Images, widget: list, required: false, field: { name: image, label: Image, widget: image } }

  - name: 'blog'
    label: 'Blog'
    folder: 'src/pages/blog'
    create: true
    fields:
      - { name: title, label: Title }
      - { name: priority, label: Priority, widget: number, default: 0, valueType: int }
      - { name: thumbnail, label: Thumbnail Image, widget: image }
      - { name: url, label: URL }
      - { name: date, label: Date, widget: datetime }
      - { name: intro, label: Intro, widget: markdown }

gatsby-config.js

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#F9F9F9`,
        theme_color: `#1F1F1F`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/assets`,
        name: 'media',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `articles`,
        path: `${__dirname}/src/pages/blog`,
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `projects`,
        path: `${__dirname}/src/pages/projects`,
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-relative-images`,
            options: {
              name: `media`,
            }, 
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWith: 960
            }
          }
        ],
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-netlify-cms`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-styled-components`
  ],
}

gatsby-node.js

const { fmImagesToRelative } = require('gatsby-remark-relative-images')
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

我可以用childImageSharp 正确查询name: thumbnail，但是，name: main-images 和name: extra-images 返回一个字符串数组，我不能用childImageSharp 查询。

我现在已经在这个问题上花费了相当长的时间。任何帮助将不胜感激。

Answer 1

我自己想出来的。这是由小部件的名称引起的。显然，它不与连字符一起使用。

当我将小部件更改为使用驼峰式语法而不是连字符时，它终于开始工作了。

# Before:
{ name: main-images, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }

# After
{ name: mainImages, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }