Need help with the Image tag.. can't make it work.

[Elindo586]

Summary

Going for at least 5 days with image tag problems.. very frustrated...

Any feedback on this would help a million..

1. Getting image size error from the lighthouse.. I think Next.js is suppose to present the proper image depending on screen size..

2. After updating Next.js... along with a few other dependencies and Bootstrap... now I can't center the image, and the image won't stay inside the divs...

^^ I never had a problem on problem number 2, but after updating Next.js, the images go out of line using Bootstrap..

The image won't center, or shrink inside the div

^^ code reference for testing:

hello!

hello again!

The component code is this:

import React from "react";
import Image from "next/image";
import TuWorld from "../public/carousel-main/tu-world.png";
import Everything from "../public/carousel-main/carousel-everything.png";
import HydraulicMotors from "../public/carousel-main/carousel-hydraulic-motors.png";
import HydraulicPumps from "../public/carousel-main/carousel-pumps.png";
import ValvesManifolds from "../public/carousel-main/carousel-valves-manifolds.png";
import MobileValves from "../public/carousel-main/mobile-valves.png";
import { useEffect } from "react";

const Carousel = () => {
  useEffect(() => {
    let slideIndex = 0;
    const carouselItems = document.querySelectorAll("#carousel-inner");
    console.log(carouselItems);
    showSlides();
    function showSlides() {
      for (let i = 0; i < carouselItems.length; i++) {
        carouselItems[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > carouselItems.length) {
        slideIndex = 1;
      }
      carouselItems[slideIndex - 1].style.display = "flex";
      setTimeout(showSlides, 5000);
    }
  }, []);

  return (
    <div className=" tu-world justify-content-center">
      <div className="myslide-item ">
        <Image
          id="carousel-inner"
          src={TuWorld}
          alt="tu world"
          width={1710}
          height={315}
          priority={true}
        />
      </div>
      <div className="myslide-item  ">
        <Image
          id="carousel-inner"
          src={Everything}
          alt="Everything Industrial"
          width={1710}
          height={315}
          priority={false}
        />
      </div>
      <div className="myslide-item ">
        <Image
          id="carousel-inner"
          src={HydraulicMotors}
          alt="Hydraulic Motors"
          width={1710}
          height={315}
          priority={false}
        />
      </div>
      <div className="myslide-item ">
        <Image
          id="carousel-inner"
          src={HydraulicPumps}
          alt="Hydraulic Pumps"
          width={1710}
          height={315}
          priority={false}
        />
      </div>
      <div className="myslide-item ">
        <Image
          id="carousel-inner"
          src={ValvesManifolds}
          alt="Hydraulic Manifolds"
          width={1710}
          height={315}
          priority={false}
        />
      </div>
      <div className="myslide-item ">
        <Image
          id="carousel-inner"
          src={MobileValves}
          alt="Hydraulic mobile valves"
          width={1710}
          height={315}
          priority={false}
        />
      </div>
    </div>
  );
};

export default Carousel;

And the related CSS is this:

.tu-world {
  padding-top: 0.2em;
}

/* .myslide-item {
} */

#carousel-inner {
  display: none;
  height: auto;
  animation-name: carousel-inner;
  animation-duration: 5s;
}

@keyframes carousel-inner {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

Additional information

No response

Example

No response

[Elindo586]

So I got this to work with plain old CSS

I don't know what changed in Bootstrap, but keeping it plain CSS is better either way.

What B it was...

Still have to check for image sizing errors..