Usage with Next.js image component

[branislavbrincko]

I would like to use Next.js image component for the image displayed in lightbox (to take advantage of the Next.js optimizations, like not showing extra large images on mobile). Can this be done? Thanks in advance.

[televators]

Are you trying to use photoswipe directly or something like react-photoswipe-gallery? If you're using react-photoswipe-gallery, this is how I'm doing it and it works fine:

<Item original={imageUrl} thumbnail={imageUrl} width='1000' height='600'>
    {({ ref, open }) => (
      <Image
        src={imageUrl}
        alt=''
        width={1000}
        height={600}
        ref={ref}
        onClick={open}
      />
    )}
</Item>

[dnywh]

I think @televators’ suggestion just sets the thumbnail/trigger image as a Next image component. The part that controls the image displayed in the lightbox is set in the Item props: original={imageUrl}.

I ran into the same issue as @branislavbrincko and got the image displayed in the lightbox via Next’s image component, as shown below. Note that this breaks the visual transition of the thumbnail ‘growing’ into the full lightbox image.

<Item 
    width={1000} 
    height={600}
    content={
        // This is the lightbox image
        <Image
            src={imageUrl}
            alt=''
            width={1000}
            height={600}
        />
    }
>
    {({ ref, open }) => (
      // This is the thumbnail
      <Image
        src={imageUrl}
        alt=''
        width={250}
        height={150}
        ref={ref}
        onClick={open}
      />
    )}
</Item>

The trick is to set the content prop whilst also keeping the width and height props, too. Remove the original={imageUrl} and thumbnail={imageUrl} props.