Statically loading NextJS Image gives 404 on production but works on localhost

Question

I don't understand why the static image is not found on production, but works on localhost. I put all my images in the directory: public/images/...

/* image.tsx */
return (
<Image
  src={"/images/frame1.png"}
  width="1000"
  height="1000"
  alt="Control description"
  style={{
    height: "auto",
    maxWidth: "100%",
    userSelect: "none",
  }}
/>
)

/* next.config.js */

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = nextConfig;

Cloudflare pages deployment:

Localhost:

My file structure:

Answer 1

first : did you try changing <Image/> to <img/> ? test this and see if it's fixed or not ( just to be sure where the problem is coming from )

second try this: change the name of the image files.from uppercase to lowercase letters.

Answer 2

The fix from <Image /> to <img /> does resolve it in some instances, but it is not the recommended way as then you are not taking advantage of NextJS's powerful image optimization.

Your problem is that you are using relative paths instead of importing the file and using it by reference.

To fix you issue, try this:

import Image from 'next/image';
import frameImage from '../public/images/frame1.png'; // path to your folder

export default function ImagePage() {

  return (
    <Image
      src={frameImage}
      ...otherProps
    />
  )
}

Docs here: https://beta.nextjs.org/docs/optimizing/images