Inconsistent Image Loading with Case-Sensitive Extensions

MohammadMahdiDerakhshandeh commented 1 month ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Enterprise
  Available memory (MB): 8076
  Available CPU cores: 4
Binaries:
  Node: 20.13.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.3
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which example does this report relate to?

This report does not directly relate to any specific example from the Next.js examples folder. It is a general issue encountered in projects where static images with case-sensitive extensions (e.g., .JPG vs. .jpg) cause problems in the production build

What browser are you using? (if relevant)

Chrome Version 127.0.6533.72 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

No response

Describe the Bug

In our project, we have static images stored in the public folder. When an image has a .JPG extension, but the code references it with a .jpg extension, everything works fine in the development mode. However, in the production mode, after building the project, these images fail to load, and no clear error message is provided.

Expected Behavior

I expect that image files with case-sensitive extensions (e.g., .JPG vs. .jpg) should be handled consistently across both development and production environments. Specifically, in production mode, these images should load correctly without any issues, just as they do in development mode. Alternatively, there should be a clear and concise error message indicating the mismatch in file extensions during the build process, allowing developers to identify and correct the issue promptly.

To Reproduce

Create a Next.js project or use an existing one.
Place an image with a .JPG extension in the public directory.
Reference this image in a component using a .jpg extension.

` // ExampleComponent.jsx import Image from 'next/image';

const ExampleComponent = () => (

);

export default ExampleComponent; `

Run the project in development mode using npm run dev.
Observe that the image loads correctly without any errors.
Build the project for production using npm run build.
Start the production server using npm start.
Observe that the image fails to load in production mode, and no clear error message is provided.

AliRazaDev27 commented 1 month ago

Not enough information provided for reproduction, link to a git repository. Are you importing the image first like import pic from "./pic.jpg" or using the image from public directory like.

also have you also checkout for other extensions?

MohammadMahdiDerakhshandeh commented 1 month ago

Not enough information provided for reproduction, link to a git repository. Are you importing the image first like import pic from "./pic.jpg" or using the image from public directory like. also have you also checkout for other extensions?

I using the image from public directory and i didn't check another extensions

vercel / next.js