Entonces, tengo un archivo JSON que tiene información que estoy ingresando en mi proyecto React. Uno de esos campos es una palabra clave de imagen. Quiero usar eso para llamar imágenes en una carpeta "mostrar" donde se pueden descargar imágenes promocionales.
esteAño.json
{ "title": "Rope", "author": "Patrick Hamilton", "image": "rope", },{ "title": "I Hate Hamlet", "author": "Paul Rudnick", "image": "iHateHamlet", } ]Hice una consulta que toma las imágenes de dicha carpeta "mostrar" en el archivo jsx
{ allFile(filter: {relativeDirectory: {eq: "shows"}}) { edges { node { id name childImageSharp { gatsbyImageData(placeholder: DOMINANT_COLOR) } } } } }He intentado escribir algunas funciones que comparan las propiedades del nombre, pero parece que no puedo escribir nada que funcione. No estoy captando algo aquí y simplemente no sé qué es.
El showImage se pasa mientras mapeo a través de mi archivo JSON y lo comparo con imageData, que son los datos de consulta. El registro de la consola muestra los nombres correctos que se están comparando, así que sé que está pasando. simplemente no está pasando esos datos a GatsbyImage.
function findImage(showImage) { imageData.map((image) => { console.log(image.node.name + ' vs ' + showImage) if (image.node.name == showImage) { /**if the image name == our show image name, we return that image data */ return data.file.childImageSharp.gatsbyImageData } }) return }Mi repositorio de git está aquí si ayuda: https://github.com/TheComeBackGuy/TKD-Gatsby
Bueno, me di cuenta de lo que estaba haciendo mal. No estaba devolviendo la respuesta a la raíz de la función. Estoy seguro de que una persona con más experiencia podría escribirlo más limpio, pero esto es lo que usé.
export default function FindImage(queryArray, showImage) { let returnStatement = null queryArray.map((images) => { if (images.node.name == showImage) { console.log(showImage + ' vs ' + images.node.name) console.log(images.node.childImageSharp.gatsbyImageData) returnStatement = images.node.childImageSharp.gatsbyImageData } }) return returnStatement }