Recently, I added some images (in JPG format) to my assets directory to show them in a slider. Everything worked fine in development as expected. But when building it using next build, I am getting an error saying: Error: VipsJpeg: Invalid SOS parameters for sequential JPEG. I tried doing some research and found that this has something to do with Sharp but could not find any related fixes with Next.js. Also tried replacing the images with new ones but does not seem to work either. Does anyone know how it can be fixed?

Note: I had images in previous builds but there were no issues at all. Only this time.

The slider component where the new images were used:

"use client";
import Image from "next/image";
import { EffectFade, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import Image1 from "@/assets/images/property-slider/slide-1.jpg";
import Image2 from "@/assets/images/property-slider/slide-2.jpg";
import Image3 from "@/assets/images/property-slider/slide-3.jpg";
import Image4 from "@/assets/images/property-slider/slide-4.jpg";
import Image5 from "@/assets/images/property-slider/slide-5.jpg";

const imagesList = [Image1, Image2, Image3, Image4, Image5];

export default function PropertySlider() {
  return (
    <Swiper
      spaceBetween={30}
      effect="fade"
      navigation
      autoplay
      loop
      pagination={{ clickable: true }}
      modules={[EffectFade, Navigation, Pagination]}
      className="h-[300px] md:h-[400px] xl:h-[500px] w-full ring-4 ring-primary bg-muted rounded-lg overflow-hidden"
    >
      {imagesList.map((src, index) => (
        <SwiperSlide className="w-full h-full" key={index}>
          <Image
            src={src}
            alt="Property image"
            width={500}
            height={200}
            className="w-full h-full object-cover bg-center"
          />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}