Learn how to handle image loading errors in Next.js using the next/image component with onError, onLoad, and unoptimized props. This video provides a straightforward solution for displaying unoptimized images when encountering issues like 403 errors with externally hosted images.
#nextjs
0:00 - Intro
0:08 - The issue
0:29 - The solution
1:36 - The `unoptimized` prop
1:51 - The `onError` prop
2:17 - The `onLoad` prop
Docs: https://nextjs.org/docs/app/api-reference/components/image#onerror
Repo: https://github.com/vercel-labs/book-inventory
Download
0 formats
No download links available.
Handling `next/image` errors with `onError`, `onLoad`, and `unoptimized` | NatokHD