404 on loading Images in my Nextjs Website

Support
1

Hello, after deploying my site on Netlify I am facing this issue. It doesn’t happen all the time. Also, it may happen on mobile more. It might be a coincidence.
I have my images in the Public Folder. It works well on Vercel and also in development.
Here is my website.

The repo is private. But if is essential I can temporarily add a support engineer to our repo.
I am now trying to add a CDN to serve the image. Don’t know whether it will work or not.

2

@salmansadi165324 Facing what issue?

I presume that it’s image related based on everything else you’ve said, but you’ve provided no description or example of the issue at all.

Which images? Where on the site?

3

I am sorry that I haven’t made it clear. Sometimes my images on the website don’t load. It didn’t just happen for a single image. It has happened randomly for three or four images. I haven’t found any pattern the code is also similar.
The error from the console is 404 (Not Found). I have been using Vercel to test the site in production too for a month. Never faced a similar issue.

import classNames from "classnames";
import Image from "next/image";
import React from "react";

const MenuSectionTitle = ({ sectionBg, title }) => {
  return (
    <section className="relative h-56 w-full overflow-hidden md:h-64 lg:h-96 ">
      <div className="absolute inset-0 z-10 bg-black opacity-40 lg:hidden"></div>
      <Image
        className="fixed object-cover object-left lg:object-top "
        alt="Page header Banner Image"
        src={sectionBg}
        fill
      ></Image>

      <div className=" relative z-20 flex h-full flex-col items-center justify-center px-2 text-center font-bold">
        <h2
          className={classNames("uppercase text-4xl md:text-5xl lg:text-6xl")}
        >
          {title}
        </h2>
      </div>
    </section>
  );
};

export default MenuSectionTitle;
4

@salmansadi165324 Thanks for providing the additional detail, unfortunately it doesn’t look like something I could assist with.

Hopefully the extra information helps Netlify pinpoint what might be occurring.

5

Thanks. I will be looking forward to hearing from Netlify Team soon.

6

I have changed all the images src to Cloudinary CDN. Instead of loading them directly from public folder. I hope this will solve the problem. But not sure.

7

@salmansadi165324, your images appear to be working now. Are you still having issues?