How to catch IPX errors and show fallback with `NuxtImg` or `NuxtPicture`?

[oemer-aran]

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>"
  }
}

[Baroshem]

I think that this error is not releated to the image component but rather a build option.

I dont think that you can catch this kind of error this way. Maybe a better option would be to catch this error during build? I am not sure what you are trying to achieve here as well. Could you elaborate? :)

[adematte]

Maybe a better option would be to catch this error during build?

@Baroshem I found this question searching for a related issue. We have a few malformed SVGs which causes Nuxt to fail during build with the error IPX_INVALID_IMAGE. How can we actually handle this type of error during build ? My team couldn't find any useful hooks or options to handle this: replace images which can't be optimized due to an error with a placeholder.