Need help to use GatsbyImage in react-photo-album

[geohuz]

I'm having hard time to figure out how to incorporate GatsbyImage component into my project, in Gatsby all local images have prepared in the images.nodes object array, here is data structure of a object:

{
        "name": "DSC07476",
        "childImageSharp": {
            "gatsbyImageData": {
                "layout": "constrained",
                "backgroundColor": "#484848",
                "images": {
                    "fallback": {
                        "src": "/static/cce539c7352bb03422c04981baf38131/9643b/DSC07476.jpg",
                        "srcSet": "/static/cce539c7352bb03422c04981baf38131/d309f/DSC07476.jpg 400w,\n/static/cce539c7352bb03422c04981baf38131/0f2ec/DSC07476.jpg 800w,\n/static/cce539c7352bb03422c04981baf38131/9643b/DSC07476.jpg 1600w",
                        "sizes": "(min-width: 1600px) 1600px, 100vw"
                    },
                    "sources": [
                        {
                            "srcSet": "/static/cce539c7352bb03422c04981baf38131/40bf3/DSC07476.webp 400w,\n/static/cce539c7352bb03422c04981baf38131/73d40/DSC07476.webp 800w,\n/static/cce539c7352bb03422c04981baf38131/a6357/DSC07476.webp 1600w",
                            "type": "image/webp",
                            "sizes": "(min-width: 1600px) 1600px, 100vw"
                        }
                    ]
                },
                "width": 1600,
                "height": 1782
            }
        }

and here is the code to render GatsbyImages:

  {images.nodes.map((image) => (
          <GatsbyImage key={image.name} alt={image.name} image={image.childImageSharp.gatsbyImageData} />
        ))}

So it looks like I should manually structure the photos data from gatsbyimage nodes and then inside the renderphoto function restructure the node data to feed into GatsbyImage to make it work?

[igordanchenko]

Since you are using a custom render function in this case, you can pass any string as photo src, as long as you are able to lookup the photo object based on that string inside the render function.

For example, you can pass an index of the photo in the array.

const photos = images.nodes.map(
    (
        {
            childImageSharp: {
                gatsbyImageData: { width, height },
            },
        },
        index
    ) => ({
        src: `${index}`,
        width,
        height,
    })
);

and then lookup Gatsby image in the renderPhoto:

const image = images.nodes[+photo.src];
return <GatsbyImage key={image.name} alt={image.name} image={image.childImageSharp.gatsbyImageData} />

[geohuz]

This works perfectly! The only problem is with lightbox, if I use custom render like above then the light box component doesn't show any image, the network request is something like: '5:1 GET http://localhost:8000/5 404 (Not Found)'

[geohuz]

I've made the slide image showing with adding the render method in the Lightbox component, not sure if it is a best way to do it:

        <Lightbox
            render={{
              slide: (slide) => {
                const image = images.nodes[+slide.src]
                return <GatsbyImage key={image.name} alt={image.name} image= 
                     {image.childImageSharp.gatsbyImageData} />
              }
             thumbnail: (thumbnail) => {
                const image = images.nodes[+thumbnail.slide.src]
                return <GatsbyImage key={image.name} alt={image.name} image= 
                    {image.childImageSharp.gatsbyImageData} /> 
              },
            }}
         />

[igordanchenko]

This looks about right.

Alternatively, you can embed Gatsby image object inside the photo / slide objects respectively.

const photos = nodes.map(({ name, childImageSharp }) => ({
    src: name,
    width: childImageSharp.gatsbyImageData.width,
    height: childImageSharp.gatsbyImageData.height,
    gatsbyImage: childImageSharp.gatsbyImageData,
}))

...

<PhotoAlbum
    photos={photos}
    renderPhoto={({ photo: { src, gatsbyImage } }) => (
        <GatsbyImage key={src} alt={src} image={gatsbyImage} />
    )}
    ...
/>

<Lightbox
    slides={photos}
    render={{
        slide: ({ src, gatsbyImage }) => <GatsbyImage key={src} alt={src} image={gatsbyImage} />,
        thumbnail: ({ slide: { src, gatsbyImage } }) => (
            <GatsbyImage key={src} alt={src} image={gatsbyImage} />
        ),
    }}
    ...
/>

[geohuz]

Yep, that makes code simple and easier to maintain!