dimsemenov / PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent
http://photoswipe.com
MIT License
23.96k stars 3.32k forks source link

Usage with Next.js image component #2105

Open branislavbrincko opened 3 weeks ago

branislavbrincko commented 3 weeks ago

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 commented 1 week ago

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>