静态加载 NextJS 图像在生产环境中给出 404，但在本地主机上工作

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

That still a problem.

I have the same situation, next/image ins't loading images in production from "public" folder.