Setting fallback image on 404 respons after fetch
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
Hi
I'm not really sure how this is supposed to work? There is nothing in the documentation that shows how to do it. It says that you can use Native events such as load or error.
I have tried add a fallback image when the response comes back as 404 direct on the NuxtImg components like so:
<NuxtImg
:src="item.ImageURL"
width="120"
height="120"
@error="$event.target.src = fallbackImg"
/>
but without luck 😢
I've also tried making a function that returns the url to another fallback image but no luck.
It feels like the error event is emitted long after all the images are looped? Or Is there a way to catch it before?
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
Start by reproducing the 404 case with the NuxtImg component and its native error event, using the fallback-image example from the issue. Inspect how NuxtImg handles failed image responses and document or enable a reliable fallback behavior, with the 404 case confirming that the fallback image is displayed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100