如何从 Gatsby.js 中的 YAML 数组获取图像

Question

我正在用 Gatsby.js

开发博客

每个 post 都是一个 YAML 文件，其中有一个画廊数组，如下所示：

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

在 post 我有这样的东西：


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 文件的数组中找到的图像，但是当它只是一个图像时它会转换...

（在某些 post 中有这样的字段

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 实际上会尝试确定字符串是否为文件路径，但这些路径必须与它们所在的文件相关。

考虑以下示例：

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

content/pages/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 的存在允许我们通过定义自定义解析器和字段扩展来更优雅地处理此类场景，但对于不熟悉的人来说可能会令人望而生畏图 QL。阅读更多相关信息 here。

Answer 2

我通过安装这个解决了：https://www.npmjs.com/package/@forestryio/gatsby-remark-normalize-paths

感谢您为我指明了正确的方向。

男

如何从 Gatsby.js 中的 YAML 数组获取图像

How to source images from a YAML array in Gatsby.js

reactjs

gatsby

gatsby-image