CODEWITHSUNDEEP
next.jsnextjs-imagecloudflare-pagesnext.js13
koza
koza

Reputation: 81

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

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: enter image description here

Localhost: enter image description here

My file structure: enter image description here

Upvotes: 1

Views: 2614

Answers (2)

Stewartside
Stewartside

Reputation: 20925

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

Upvotes: 0

Mohamadreza Kazemian
Mohamadreza Kazemian

Reputation: 301

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.

Upvotes: 0

Related Questions