Gatsby gatsby-remark-relative-images 不會將 yaml 絕對圖像路徑轉換為相對

Question

我目前正在嘗試將 yaml 文件中的絕對路徑解析為相對路徑，以便可以在 gatsby 中使用 graphql 進行查詢。 絕對路徑由 netlify-cms 提供。

相同的路徑放在md文件中，使用gatsby-remark-relative-images轉換成相對路徑時，完全沒有問題，但同樣不適用於yaml。

圖片文件放在static/img/ ，cms提供的路徑是/img/xxx.jpg

src/data/pages/index.yaml

page: index
slider:
  - image: /img/1_new.jpg
    url: ""
  - image: /img/2_new.jpg
    url: ""
  - image: /img/3_new.jpg
    url: ""

蓋茨比-config.js

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/data`,
        name: 'data',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/assets/images`,
        name: 'images',
      },
    },
    {
      resolve: 'gatsby-plugin-react-svg',
      options: {
        rule: {
          include: /\.inline\.svg$/,
        },
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-transformer-yaml-plus`,
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-relative-images',
            options: {
              name: 'uploads',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 2048, // must specify max width container
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {
              destinationDir: 'static',
            },
          },
          `gatsby-remark-smartypants`,
          `gatsby-remark-widows`,
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    'gatsby-plugin-netlify', // make sure to keep it last in the array
  ],
  // for avoiding CORS while developing Netlify Functions locally
  // read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
  developMiddleware: app => {
    app.use(
      '/.netlify/functions/',
      proxy({
        target: 'http://localhost:9000',
        pathRewrite: {
          '/.netlify/functions/': ``,
        },
      })
    )
  },
}

此外，這里是將節點中的絕對路徑轉換為相對路徑的地方

蓋茨比-node.js

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node) // convert image paths for gatsby images

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

最后，這里是定義 netlify-cms 配置的地方

靜態/管理員/config.yml

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - label: "Data"
    name: "data"
    files:
    - name: "index"
      label: "Index"
      file: "src/data/pages/index.yml"
      fields:
        - {label: "Page", name: "page", widget: hidden, default: "index"}
        - label: "Slider"
          name: "slider"
          widget: list
          fields:
            - {label: "Image", name: "image", widget: image}
            - {label: "Url", name: "url", widget: string, required: false}

錯誤信息

 ERROR 

GraphQL Error Field "image" must not have a selection since type "String" has no subfields.

  file: /home/gaara/JS/iconic-starter-netlify-cms/src/pages/index.js

   1 |
   2 |   query IndexPage {
   3 |     pagesYaml(page: { eq: "index" }) {
   4 |       id
   5 |       slider {
   6 |         desktop {
>  7 |           image {
     |                 ^
   8 |             childImageSharp {
   9 |               fluid(maxWidth: 2000, quality: 90) {
  10 |                 aspectRatio
  11 |                 presentationWidth
  12 |                 src
  13 |                 srcSet
  14 |                 sizes
  15 |               }
  16 |             }
  17 |           }


⠙ extract queries from components
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我已經確保所有圖像都存在於static/img/文件夾中。 我還多次嘗試重新啟動服務器，以避免圖像不加載問題。 從 netlify-cms 給出的圖像路徑應該保留為/img/xxx.jpg ，因為有很多其他 markdown 文件使用它並且解析路徑沒有問題。

我可以知道是否有任何配置問題我做錯或錯過導致gatsby-remark-relative-images無法解析文件路徑？

Answer 1

gatsby-remark-relative-images是一個插件，僅適用於gatsby-transformer-remark處理的 markdown 文件。

最近的 graphql 架構自定義更新允許獨立於文件類型的新解決方案。 您可以在此處瀏覽有關該主題的官方文檔： Customize the Graphql Schema (gatsby docs)

相反，在 gatsby 到達之前修改圖像路徑（如使用 gatsby-remark-relative-images），我們將自定義 graphql 模式，以便圖像字段（在您的情況下為slider.desktop.image ）解析為圖像文件節點反而。

請注意，下面的節點類型只是松散的示例，您應該 go 到您的 graphiql 端點（即localhost:8000/graphiql ）以找到正確的類型名稱。

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes, createFieldExtension } = actions

  createFieldExtension({
    name: 'fileByStaticPath',
    extend: () => ({
      resolve: (src, args, ctx, info) => {
        // look up original string value
        const { fieldName } = info
        const partialPath = src[fieldName]

        // TODOS
        // - join path to create the correct image file path
        // - query the file node with `context.nodeModel.runQuery`
        // - return the file node if exists
      }
    })
  })


  const typeDefs = `
    type YamlSliderDesktop @infer {
      image: File @fileByStaticPath
    }

    type YamlSlider @infer {
      desktop: YamlSliderDesktop
    }

    type PagesYaml implements Node @infer {
      slider: YamlSlider
    }
  `
  createTypes(typeDefs)
}

---

我發現自己經常這樣做，所以我為它寫了一個插件： gatsby-schema-field-absolute-path (github) 。

我還在我的博客 ( byderek.com ) 上對此進行了更深入的介紹，但實際上，在 Gatsby 官方文檔中找不到任何內容，只是用不同的語言進行了解釋。

希望能幫助到你！