Rendering sortable-gallery with next.js Image component does not show overlay

[park-onezero]

I combined the two examples, but there is a problem that the overlay image does not appear and the image blinks when onDrop.

without renderNextImage

with renderNextImage

function renderNextImage({ alt = "", title, sizes }: RenderImageProps, { photo, width, height }: RenderImageContext) {
  return (
    <div
      style={{
        width: "100%",
        position: "relative",
        aspectRatio: `${width} / ${height}`,
      }}
    >
      <Image
        fill
        src={photo}
        alt={alt}
        title={title}
        sizes={sizes}
        placeholder={"blurDataURL" in photo ? "blur" : undefined}
      />
    </div>
  );
}

<SortableGallery
  render={{
    image: renderNextImage,
  }}
  gallery={RowsPhotoAlbum}
  spacing={4}
  photos={photos}
  movePhoto={(oldIndex, newIndex) => setPhotos(arrayMove(photos, oldIndex, newIndex))}
/>

[igordanchenko]

Thank you for bringing this up. This is happening because SortableGallery example is unaware of the DOM structure of photos rendered with a custom render function.

You should be able to make the two examples work together with the following modifications:

1. Add data-id attribute to the next/image image:

<Image
 data-id={photo.src}
 // ...
/>

2. Modify handleDragStart function in the SortableGallery.tsx:

const image = ref.current?.querySelector(`img[data-id="${photo?.id}"]`);
const padding = image?.parentElement?.parentElement
  ? getComputedStyle(image.parentElement.parentElement).padding
  : undefined;

[park-onezero]

Thank you. It works well!