Back to Browse

Handling `next/image` errors with `onError`, `onLoad`, and `unoptimized`

1.5K views
Premiered May 31, 2024
2:37

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