Gatsby 从数据中获取具有相对路径的图像文件夹

Posted 2023-03-08

【中文标题】Gatsby 从数据中获取具有相对路径的图像文件夹

【英文标题】：Gatsby get image folder with relative path from data

【发布时间】：2020-03-16 09:39:50

【问题描述】：

我正在制作一个 Gatsby 静态网站，但在使用 GraphQL 时遇到了问题。

我正在尝试使用 GraphQL 查询文件夹中的所有图像。我的数据有路径：

"images" : "./relimages/vila-franceza",
"cardimages" : "./relimages/main-page-card-images/vila-franceza.jpg",

获取 cardimages 图像可以正常工作。我可以随心所欲地使用 gatsby 图像来操作它。

但是当我查询 images （这是一个文件夹）时，我只得到文件夹的路径。

这是我的查询：

query flagquery 
  allDataRoJson 
    edges 
      node 
        images
        cardimages 
          id
          childImageSharp 
            fluid 
              originalImg
            
          
        
      
    
  

在我的查询中，图像以字符串形式返回。我怎样才能让它可以被graphQL查询，而不是用childImageSharp属性获取一组图像，就像我指定一个图像的情况一样。

这是 GraphiQL 中查询的输出

  "data": 
    "allDataRoJson": 
      "edges": [
        
          "node": 
            "images": "./relimages/vila-franceza",
            "cardimages": 
              "id": "2a1fca39-6192-5e09-b913-43c5bf48966f",
              "childImageSharp": 
                "fluid": 
                  "originalImg": "/static/30337f0e47a254b68d443be671031647/0a89a/vila-franceza.jpg"
                
              
            
          
        ,
        
          "node": 
            "images": "./relimages/vila-franceza",
            "cardimages": 
              "id": "2a1fca39-6192-5e09-b913-43c5bf48966f",
              "childImageSharp": 
                "fluid": 
                  "originalImg": "/static/30337f0e47a254b68d443be671031647/0a89a/vila-franceza.jpg"
                
              
            
          
        ,
        
          "node": 
            "images": "./relimages/vila-franceza",
            "cardimages": null
          
        
      ]
    
  

【问题讨论】：

很确定这只是一个语法错误，也许这应该是"images" : "src/relimages/vila-franceza", "cardimages" : "src/relimages/main-page-card-images/vila-franceza.jpg",或"images" : "static/relimages/vila-franceza", "cardimages" : "stactic/relimages/main-page-card-images/vila-franceza.jpg,

嘿，尼克，语法很好，因为它有效。问题在于它将图像视为字符串而不是文件夹。

【参考方案1】：

假设您想获取“images”文件夹中的所有图像并使用 gatsby-image 将它们输出到您的页面上，我就是这样做的：

import React from "react"
import  graphql  from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"

export default ( data ) => (
<Layout>
  data.allFile.edges.map(( node , i) => (
    <Img
      key=i
      fluid=node.childImageSharp.fluid
      alt=node.name
    />
  ))
</Layout>
)

export const query = graphql`
  query 
    allFile(
      filter: 
        extension:  regex: "/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/" 
        absolutePath:  regex: "/images/" 
      
    ) 
      edges 
        node 
          name
          childImageSharp 
            fluid(maxWidth: 915, quality: 70) 
              aspectRatio
              ...GatsbyImageSharpFluid_withWebp
            
          
        
      
    
  
`

我的图片文件夹位于：src/images

【讨论】：

我的数据有一个文件夹路径。我想要该文件夹的所有内容，就像我只是指向一个图像一样。如果我的路径是：数据/图像，我想要一个包含所有数据/图像/***的数组