CODEWITHSUNDEEP
reactjsnext.jscarouselthumbnailsnextjs-image
János
János

Reputation: 35050

Why does Carousel not accept Next.js Image?

We use react-responsive-carousel in our Next.js project. When we replaced img with Image to optimize thumbnail image size, thumbnails disappeared. Do you know why?

Upvotes: 2

Views: 883

Answers (1)

juliomalves
juliomalves

Reputation: 50278

Looks like it's a limitation of react-responsive-carousel:

Note that it's not possible to get images rendered inside custom components. Carousel will find the thumbs if they are rendered as direct children of the carousel or if they are inside a div or another normal html element in a way that it's possible to access the children of these elements from the carousel. For performance reasons, it's not possible to get images inside custom components.

next/image is a wrapper around the <img> element, which means Carousel is not able to pick up the images for the thumbnails.

Upvotes: 1

Related Questions