How to catch IPX errors and show fallback with `NuxtImg` or `NuxtPicture`?
Open
Nobody has claimed this yet.
question
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
I tried to use @error on NuxtImg and <NuxtErrorBoundary> component, but nothing works:
<template>
<nuxt-error-boundary @error="handleError">
<nuxt-img
@error="handleError"
@load="handleLoad"
:src="url"
/>
<template #error="{ error }">
<p>This is never displayed: {{ error }}</p>
</template>
</nuxt-error-boundary>
</template>
<script lang="ts" setup>
const handleError = (e) => {
// never gets printed, even if no image is displayed and ipx had an error
console.log("error", e)
}
const handleLoad = (e) => {
// gets printed when image is loaded successfully
console.log("load", e)
}
</script>
Here is the full IPX error (also see screenshot):
{
"error": {
"message": "[400] [IPX_INVALID_IMAGE] Cannot parse image metadata: http://localhost:4566/<image-url>"
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names NuxtImg, NuxtPicture, NuxtErrorBoundary, and IPX but no repository files or tests. Reproduce the failed image case with the provided snippet, then trace how image errors propagate through these components. Done means establishing and documenting or correcting a reliable fallback and error-handling path for the reported IPX response.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100