Open MohammadMahdiDerakhshandeh opened 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?
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
Verify canary release
Provide environment information
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.