nextjs - 💡(How to fix) Fix [Regression] AVIF fails to render with The requested resource isn't a valid image for ... received null [9 comments, 7 participants]

TL;DR

• The issue with the broken image in Next.js can likely be resolved by checking the image file and its import statement in the code.

Guidance

• Verify that the image file atgiftcard.81b93929.avif exists in the correct directory and is correctly referenced in the code.
• Check the import statement for the image in the code to ensure it is correctly formatted and points to the correct file location.
• Review the Next.js documentation for next/image to ensure that the component is being used correctly.
• Test the image in a different format (e.g., JPEG or PNG) to see if the issue is specific to the AVIF format.

Example

• No code snippet is provided as the issue does not include specific code that can be modified.

Notes

• The issue may be related to the specific version of Next.js being used (15.6.0-canary.27), but without more information, it is difficult to determine if this is the cause.
• The issue only occurs in next dev mode, so it may be related to the development environment.

Recommendation

• Apply workaround: Try using a different image format or checking the image file and its import statement in the code, as the issue may be related to the specific image or its usage in the code.