如何從 Gatsby.js 中的 YAML 數組獲取圖像

Question

我正在用 Gatsby.js 開發一個博客

每個帖子都是一個 YAML 文件，其中有一個畫廊數組，如下所示：

gallery:
-'/uploads/image1.jpg'
-'/uploads/image2.jpg'
-'/uploads/image3.jpg'
-'/uploads/image4.jpg'
-'/uploads/image5.jpg'

在帖子中，我有這樣的事情：

const images = data.postData.frontmatter.gallery;

return (

{images.map((image, index) => {
            return (
  <img src={image}/>
)
}
)};

export const query = graphql`
query PostData($slug: String!) {
  postData: markdownRemark(fields: {slug: {eq: $slug}}) {
        frontmatter {
          gallery

        }
    }
}
`;

但是圖像沒有顯示，因為它們在構建時沒有被處理並放在靜態文件夾中。

據我了解，插件 'gatsby-plugin-sharp' 不會轉換在 YAML 文件中的數組中找到的圖像，但是當它只是一張圖像時會轉換...

（在一些帖子中有這樣一個字段

main-image: 'path/to/the/image'

然后我可以像這樣使用graphql：

     main-image {
       fluid {
         src
       }
     }
   }

而對於 'gallery' 數組，不會創建 'fluid' 節點。）

我希望這是有道理的，我意識到我對某些事情有點困惑，我希望你能幫助我理解一些東西。

謝謝，

米

編輯

感謝@Z，我向前走了一點。 茲拉特夫。

我在 gatsby-node.js 中插入這個：

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MarkdownRemark
    implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      gallery: [File]
    }
  `;
  createTypes(typeDefs);
};

現在為畫廊數組中的每個圖像創建節點。

但是，查詢圖像我得到空...

這里有一些細節：

YAML 文件：

---
date: 2019-11-06T13:47:07.000+00:00
title: Cool Project
main_picture: "/uploads/simon-matzinger-Gpck1WkgxIk-unsplash.jpg"
gallery:
 - "/uploads/PROEGELHOEF.jpg"
 - "/uploads/swapnil-dwivedi-N2IJ31xZ_ks-unsplash-1.jpg"
 - "/uploads/swapnil-dwivedi-N2IJ31xZ_ks-unsplash.jpg"
 - "/uploads/simon-matzinger-Gpck1WkgxIk-unsplash.jpg"
---

這里是 GraphQl 查詢：

query MyQuery {
  allMarkdownRemark(filter: {id: {eq: "af697225-a842-545a-b5e1-4a4bcb0baf87"}}) {
    edges {
      node {
        frontmatter {
          title
          gallery {
            childImageSharp {
              fluid {
                src
              }
            }
          }
        }
      }
    }
  }
}

這里的數據響應：

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "Cool Project",
              "gallery": [
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                },
                {
                  "childImageSharp": null
                }
              ]
            }
          }
        }
      ]
    }
  }
}

我想我仍然缺少一些東西......

Answer 1

我將嘗試解釋這在 Gatsby 中是如何工作的。 首先，是gatsby-transformer-sharp插件將您的File節點轉換為ImageSharp節點。 gatsby-plugin-sharp當然也作為低級 API 參與其中。

您遇到的主要問題是 Gatsby 無法識別（推斷）您的數據作為對文件的引用。 一旦它進行了一系列轉換，就會自動啟動。 Gatsby 實際上試圖確定 string 是否是文件路徑，但這些路徑必須與它們所在的文件相關。

考慮以下示例：

gatsby-project
├── content
│   ├── images
│   │   └── home.png
│   └── pages
│       └── home.yml
└── src

內容/頁面/home.yml

title: Homepage
url: /
image: ../images/home.png

最簡單的解決方案是在 yaml 文件中提供正確的相對路徑。 遺憾的是，我們知道這並不總是可能的。 NetlifyCMS 創建的文件就是一個例子。 如果這也是您的情況，請嘗試一些現有的解決方案，例如： https : //www.gatsbyjs.org/packages/gatsby-plugin-netlify-cms-paths/

自 Gatsby 2.2.0 以來， createSchemaCustomization API 的存在允許我們通過定義自定義解析器和字段擴展來更優雅地處理此類場景，但對於不熟悉 GraphQL 的人來說可能令人生畏。 在此處閱讀更多相關信息。

Answer 2

我通過安裝這個解決了： https : //www.npmjs.com/package/@forestryio/gatsby-remark-normalize-paths

謝謝你把我放在正確的方向。

米