Javascript Gatsby从数据获取具有相对路径的图像文件夹
我正在制作一个盖茨比静态网站,我在GraphQL方面遇到了问题 我正在尝试使用GraphQL查询文件夹中的所有图像。我的数据具有以下路径: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图像可以正常工作。我可以用盖茨比的形象任意操纵它 但是当我查询作为文件夹的图像时,我只得到该文件夹的路径 我的问题
"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,我需要一个包含所有数据/图像的数组/***