如何从JSON文件中加载数组图像在react盖茨比?

Question

我正在使用react gatsby，我正在从JSON文件创建页面，看起来像这样

[
{
"slug": "camping",
"img": "../assets/images/campingDetails.jpg",
"name": "Camping",
"description": "Acampada, campismo,​ campamento o el anglicismo camping​ hacen referencia a la actividad humana que consiste en colocar una vivienda temporal, ya sea portátil o improvisada, en un lugar con el fin de habitarla. También se denomina así al lugar físico donde se realiza esta actividad.",
"gallery" : [
{"imageC": "../assets/images/campingDetails.jpg"} ,
{"imageC": "../assets/images/camping1.jpg"}
]
},
{
"slug": "pesca",
"img": "../assets/images/FishingDetails.jpg",
"name": "Pesca",
"description": "La pesca se define como aquella actividad que se realiza para extraer peces. Puede realizarse en aguas continentales o marítimas. Ancestralmente, la pesca ha consistido en una de las actividades económicas más tempranas de muchos pueblos del mundo.",
"gallery" : [
{"imageC": "../assets/images/FishingDetails.jpg"} ,
{"imageC": "../assets/images/pesca1.jpg"}
]

},
{
"slug": "andinismo",
"img": "../assets/images/climbingDetails.jpg",
"name": "Andinismo",
"description": "El montañismo nace en los Alpes al final del siglo XVIII. Su objetivo es conseguir llegar a la cima de una determinada montaña, como un reto a la naturaleza, que en ocasiones se llega a perder la vida..",
"gallery" : [
{"imageC": "../assets/images/climbingDetails.jpg"} ,
{"imageC": "../assets/images/andinismo1.jpg"}
]
},
{
"slug": "senderismo",
"img": "../assets/images/senderismoDetails.jpg",
"name": "Senderismo",
"descritcioncion": "El senderismo es una actividad deportiva no competitiva que consiste en caminar siguiendo un itinerario determinado. Se acostumbra a realizar en senderos balizados y homologados por el organismo competente de cada país, pero también por sendas, caminos rurales y vías verdes sin homologar.",
"gallery" : [
{"imageC": "../assets/images/senderismoDetails.jpg"} ,
{"imageC": "../assets/images/senderismo1.jpg"}
]
},
{
"slug": "montaña",
"img": "../assets/images/montanaDetails.jpg",
"name": "Montaña",
"description": "El montañismo es el deporte de caminar y hacer excursiones por las montañas. A diferencia del senderismo, que se realiza normalmente por senderos señalizados, y el trekking, una travesía de varios de días por entornos lejanos, el montañismo tiene como motivación el destino, la montaña, y por rutas de más dificultad.",
"gallery" : [
{"imageC": "../assets/images/montanaDetails.jpg"} ,
{"imageC": "../assets/images/montana1.jpg"}
]
}
]

我正在基于slug创建页面，也就是说，页面是根据slug创建的，信息是根据slug加载的，也就是说，我显示了名称和描述以及背景图像，这是正确的。我需要什么，不能找到一个解决方案是添加在每个对象的画廊中发现的图像。有什么想法吗?我做这件事已经有一段时间了，但我做不到。

这是我的graphql查询:

query MyQuery { detailsCategoriesJson(slug: {eq: "camping"}) {
name
description
img {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
gallery {
imageC {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
} 
} 
}

，这些是查询的结果:

{"data": {
"detailsCategoriesJson": {
"name": "Camping",
"description": "Acampada, campismo,​ campamento o el anglicismo camping​ hacen referencia a la actividad humana que consiste en colocar una vivienda temporal, ya sea portátil o improvisada, en un lugar con el fin de habitarla. También se denomina así al lugar físico donde se realiza esta actividad.",
"img": {
"childImageSharp": {
"fluid": {
"base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABTCRhpOcVH//EABwQAAIBBQEAAAAAAAAAAAAAAAIDAQAQERITIf/aAAgBAQABBQIneC3EdaWWhMbDLf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAERL/2gAIAQMBAT8BAy5v/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAB/9oACAECAQE/AXWb/8QAGxAAAQQDAAAAAAAAAAAAAAAAAAECEBIRMmH/2gAIAQEABj8CMRZW24aI2P/EABkQAQADAQEAAAAAAAAAAAAAAAEAEVEhEP/aAAgBAQABPyGhIE6gd6xFwTANSoCpj5//2gAMAwEAAgADAAAAEPg//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARQf/aAAgBAwEBPxATHti//8QAFhEAAwAAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/EDAv/8QAGRABAQEBAQEAAAAAAAAAAAAAAREAMUEh/9oACAEBAAE/EAmk8O4gTtqjmVMPrPWGKaGot9Hx03//2Q==",
"aspectRatio": 1.5037593984962405,
"src": "/static/6f5238b594b0fea47a09ebed51647672/14b42/campingDetails.jpg",
"srcSet": "/static/6f5238b594b0fea47a09ebed51647672/f836f/campingDetails.jpg 200w,n/static/6f5238b594b0fea47a09ebed51647672/2244e/campingDetails.jpg 400w,n/static/6f5238b594b0fea47a09ebed51647672/14b42/campingDetails.jpg 800w,n/static/6f5238b594b0fea47a09ebed51647672/47498/campingDetails.jpg 1200w,n/static/6f5238b594b0fea47a09ebed51647672/ec6c5/campingDetails.jpg 1280w",
"sizes": "(max-width: 800px) 100vw, 800px"
}
}
},
"gallery": [
{
"imageC": {
"childImageSharp": {
"fluid": {
"base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIEAwX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABTCRhpOcVH//EABwQAAIBBQEAAAAAAAAAAAAAAAIDAQAQERITIf/aAAgBAQABBQIneC3EdaWWhMbDLf/EABcRAQEBAQAAAAAAAAAAAAAAAAEAERL/2gAIAQMBAT8BAy5v/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQAB/9oACAECAQE/AXWb/8QAGxAAAQQDAAAAAAAAAAAAAAAAAAECEBIRMmH/2gAIAQEABj8CMRZW24aI2P/EABkQAQADAQEAAAAAAAAAAAAAAAEAEVEhEP/aAAgBAQABPyGhIE6gd6xFwTANSoCpj5//2gAMAwEAAgADAAAAEPg//8QAFxEBAQEBAAAAAAAAAAAAAAAAAQARQf/aAAgBAwEBPxATHti//8QAFhEAAwAAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/EDAv/8QAGRABAQEBAQEAAAAAAAAAAAAAAREAMUEh/9oACAEBAAE/EAmk8O4gTtqjmVMPrPWGKaGot9Hx03//2Q==",
"aspectRatio": 1.5037593984962405,
"src": "/static/6f5238b594b0fea47a09ebed51647672/14b42/campingDetails.jpg",
"srcSet": "/static/6f5238b594b0fea47a09ebed51647672/f836f/campingDetails.jpg 200w,n/static/6f5238b594b0fea47a09ebed51647672/2244e/campingDetails.jpg 400w,n/static/6f5238b594b0fea47a09ebed51647672/14b42/campingDetails.jpg 800w,n/static/6f5238b594b0fea47a09ebed51647672/47498/campingDetails.jpg 1200w,n/static/6f5238b594b0fea47a09ebed51647672/ec6c5/campingDetails.jpg 1280w",
"sizes": "(max-width: 800px) 100vw, 800px"
}
}
}
},
{
"imageC": {
"childImageSharp": {
"fluid": {
"base64": "data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAeABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAQDAQL/xAAWAQEBAQAAAAAAAAAAAAAAAAACAwT/2gAMAwEAAhADEAAAAYWut4QPIpREz6eBH//EABsQAAMAAgMAAAAAAAAAAAAAAAABAhETEiAh/9oACAEBAAEFAlA5SPCKwr1ucyK2auUdP//EABoRAAICAwAAAAAAAAAAAAAAAAABAxICECH/2gAIAQMBAT8ByikT6UZbX//EABkRAQACAwAAAAAAAAAAAAAAAAEAAhASUf/aAAgBAgEBPwEvVJsROY//xAAbEAACAQUAAAAAAAAAAAAAAAAAEBIBICIyUf/aAAgBAQAGPwJ5UNjqlO3/xAAbEAEAAgMBAQAAAAAAAAAAAAABACERMWEQUf/aAAgBAQABPyGGwiB3CtE+kGUCJrT1AlOuRshnFBHcPf/aAAwDAQACAAMAAAAQZMjC/8QAGhEAAgMBAQAAAAAAAAAAAAAAAAERIWFRof/aAAgBAwEBPxDi2GD8JNQ7RZ//xAAaEQACAgMAAAAAAAAAAAAAAAAAARAxESFx/9oACAECAQE/ENEs4DHbEf/EAB0QAQADAQACAwAAAAAAAAAAAAEAESExQWFxgcH/2gAIAQEAAT8Qy0hBerwlcoxZSkpND9mAI2nv3ALo9LlJChsUW9IsPmNEdrzOJ4xSV7n/2Q==",
"aspectRatio": 0.6666666666666666,
"src": "/static/e0827cd521be0a645fa77fa6a899e0dc/14b42/camping1.jpg",
"srcSet": "/static/e0827cd521be0a645fa77fa6a899e0dc/f836f/camping1.jpg 200w,n/static/e0827cd521be0a645fa77fa6a899e0dc/2244e/camping1.jpg 400w,n/static/e0827cd521be0a645fa77fa6a899e0dc/14b42/camping1.jpg 800w,n/static/e0827cd521be0a645fa77fa6a899e0dc/47498/camping1.jpg 1200w,n/static/e0827cd521be0a645fa77fa6a899e0dc/ec6c5/camping1.jpg 1280w",
"sizes": "(max-width: 800px) 100vw, 800px"
}
}
}
}
]
}
},  
"extensions": {}  
}

estes mi archivecomponent .js

import React from 'react'
import styled from 'styled-components'
import Layout from '../components/layout'
import Button from '../components/Button'
import { graphql } from 'gatsby';
import Image from 'gatsby-image';

export const query = graphql`
query ($slug : String! ) {
detailsCategoriesJson(slug: {eq: $slug}) {
name
description
img {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
gallery {
imageC {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`;

const templateDetalleCat = ({data}) => {
const tD = data.detailsCategoriesJson;
return (
<Layout>
<TemplateContainer>
<TemplateBg>
<Image 
fluid={tD.img.childImageSharp.fluid}
alt={tD.name}
/> 
</TemplateBg>
<TemplateContent>
<TemplateItems>
<TemplateH1> {tD.name} </TemplateH1>
<TemplateP>{tD.description}</TemplateP>
<Button primary="true" big="true" round="true" to="/tienda">Shop now</Button>
</TemplateItems>
</TemplateContent>

</TemplateContainer>
<CarContainer>
</CarContainer>
</Layout>  
)
}
export default templateDetalleCat

我正试图从画廊展示图像，但我不知道如何，我尝试了一些事情，但我不能。什么好主意吗?谢谢你！问候。

Answer 1

假设您的查询按预期工作，您只需要访问data中的图像数组并遍历它们:

import React from 'react'
import styled from 'styled-components'
import Layout from '../components/layout'
import Button from '../components/Button'
import { graphql } from 'gatsby';
import Image from 'gatsby-image';

export const query = graphql`
query ($slug : String! ) {
detailsCategoriesJson(slug: {eq: $slug}) {
name
description
img {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
gallery {
imageC {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
`;

const templateDetalleCat = ({data}) => {
const tD = data.detailsCategoriesJson;
return (
<Layout>
<TemplateContainer>
<TemplateBg>
<Image 
fluid={tD.img.childImageSharp.fluid}
alt={tD.name}
/> 
</TemplateBg>
<TemplateContent>
<TemplateItems>
<TemplateH1> {tD.name} </TemplateH1>
<TemplateP>{tD.description}</TemplateP>
<Button primary="true" big="true" round="true" to="/tienda">Shop now</Button>
</TemplateItems>
</TemplateContent>    
{tD.gallery.map(image=>{
return <Img fluid={image.imageC.childImageSharp.fluid} />
})}
</TemplateContainer>
<CarContainer>
</CarContainer>
</Layout>  
)
}
export default templateDetalleCat

您的图像数组在data.detailsCategoriesJson.gallery(数组)中，因此您只需要循环遍历它们并使用标记显示图像:

{tD.gallery.map(image=>{
return <Img fluid={image.imageC.childImageSharp.fluid} />
})}