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

Posted 2023-03-08

【中文标题】如何从 Gatsby.js 中的 YAML 数组中获取图像

【英文标题】：How to source images from a YAML array in Gatsby.js

【发布时间】：2020-04-03 22:54:34

【问题描述】：

我正在使用 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' 节点。）

我希望这是有道理的，我意识到我对某些事情有些困惑，希望您能帮助我理解一些事情。

谢谢，

M

编辑

感谢@Z，我前进了一点。兹拉捷夫。

我将它插入到 gatsby-node.js 中：

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

现在为图库数组中的每个图像创建节点。

但是，查询我得到 null 的图像...

这里有一些细节：

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
                
              ]
            
          
        
      ]
    
  

我想我还是错过了什么……

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

【讨论】：

谢谢！这对我有很大帮助。用我的话来说（看看我是否真的理解） Gatsby 不会将数组gallery 中的字符串识别为文件路径，因此插件不会转换文件并且不会为它们创建新节点。不幸的是，我使用 Forestry.io 作为 CMS，所以我不能使用那个快速修复。如果我理解得很好，我应该自定义 GraphQl 来告诉 Gatsby “嘿！如果你找到一个名为 gallery 的数组，请注意这是一个图像列表！请转换它们。”正确的？我会看看文档，如果你有其他关于如何做到这一点的提示，我将不胜感激:) M

【参考方案2】：

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

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

M