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:

score 0 · Answer 1 · answered Dec 16 '22 at 00:09

0

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.

answered Dec 16 '22 at 00:09

Mohamadreza Kazemian

191
7

Change from ```` to ```` did fix it, so it definitely is a nextjs-specific problem. All of the names of my files were already lowercase. – koza Dec 16 '22 at 02:34
So how we can solve this? For me, working, but this is not the best solution. We need to use Image from next.js. – Mykola Berezhniuk Jul 04 '23 at 15:06

score 0 · Answer 2 · answered Feb 02 '23 at 11:33

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

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

2 Answers2