Images Don't Render On Next 13.1.6

Question

I try using flowbite carousel with next app. Before the page become interactive, the image has a hidden class. After page become interactive, a JavaScript file removes the hidden class and makes slider work. The problem is when JavaScript loads, and slider start sliding, the image become: (Rendered size: 0 × 0 px) and doesn't renders!

Here's The Carousel Code:

`import Image from "next/image";
export default function Slider() {
 return (
    <div id="default-carousel" className="relative" data-carousel="slide">
      {/* Carousel wrapper */}
      <div className="relative h-56 overflow-hidden rounded-lg md:h-96">
        {/* Item 1 */}
        <div className="hidden duration-700 ease-in-out" data-carousel-item>
          <span className="absolute text-2xl font-semibold text-white -translate-x-1/2 -      translate-y-1/2 top-1/2 left-1/2 sm:text-3xl dark:text-gray-800">
            First Slide
          </span>
          <Image
            src={"/assets/slide1.jpg"}
            className="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2  object-contain"
            alt="..."
            fill
          />
        </div>
  );
    }

Removed unnecessary parts of code here.

Chrome Dev Tools: Screenshot of error

I've tried fill property, giving static width and height. None of them worked.

Images Don't Render On Next 13.1.6

0 Answers0