Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Gatsby从数据获取具有相对路径的图像文件夹_Javascript_Reactjs_Graphql_Gatsby - Fatal编程技术网

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

Javascript Gatsby从数据获取具有相对路径的图像文件夹,javascript,reactjs,graphql,gatsby,Javascript,Reactjs,Graphql,Gatsby,我正在制作一个盖茨比静态网站,我在GraphQL方面遇到了问题 我正在尝试使用GraphQL查询文件夹中的所有图像。我的数据具有以下路径: "images" : "./relimages/vila-franceza", "cardimages" : "./relimages/main-page-card-images/vila-franceza.jpg", 获取cardimages图像可以正常工作。我可以用盖茨比的形象任意操纵它 但是当我查询作为文件夹的图像时,我只得到该文件夹的路径 我的问题

我正在制作一个盖茨比静态网站,我在GraphQL方面遇到了问题

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

"images" : "./relimages/vila-franceza",
"cardimages" : "./relimages/main-page-card-images/vila-franceza.jpg",
获取cardimages图像可以正常工作。我可以用盖茨比的形象任意操纵它

但是当我查询作为文件夹的图像时,我只得到该文件夹的路径

我的问题是:

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文件夹中的所有图像,并将它们与gatsby image一起输出到页面上,我就是这样做的:

从React导入React 从盖茨比导入{graphql} 从盖茨比图像导入Img 从../components/Layout导入布局 导出默认值{data}=> {data.allFile.edges.map{node},i=>

假设您希望获取images文件夹中的所有图像,并将它们与gatsby image一起输出到页面上,我就是这样做的:

从React导入React 从盖茨比导入{graphql} 从盖茨比图像导入Img 从../components/Layout导入布局 导出默认值{data}=> {data.allFile.edges.map{node},i=>

很确定这只是一个语法错误,也许这应该是图像:src/relimages/vila franceza,cardimages:src/relimages/main page card images/vila-franceza.jpg,或者图像:static/relimages/vila franceza,cardimages:static/relimages/main page card images/vila franceza.jpg,嘿,尼克,语法很好,因为它可以工作。问题是它将图像视为字符串而不是文件夹。非常确定这只是一个语法错误,可能这应该是图像:src/relimages/vila franceza,cardimages:src/relimages/main page card images/vila-franceza.jpg,或者图像:static/relimages/vila franceza,cardimages:stactic/relimages/main page card images/vila franceza.jpg,嘿,尼克,语法很好,因为它可以工作。问题是它将图像视为字符串而不是文件夹。我的数据有一个指向文件夹的路径。我希望直接指向该文件夹的所有内容,就像我只指向图像一样。如果我的路径为:data/images,我希望所有数据/图像的数组/***我的数据有一个指向文件夹的路径。我希望所有直接指向该文件夹的内容,就像我只指向一个图像一样。如果我的路径是:data/images,我需要一个包含所有数据/图像的数组/***