fix: fallback nuxt image

[preschian]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Related: Cyberpunk2077 at kodadot? #8238

Did your issue had any of the "$" label on it?

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖[deprecated] Generated by Copilot at 10d717e

Improved image loading and fallbacks in various components. Used ImageMedia component to handle different image sources and statuses in NeoAvatar and MediaItem. Added a default placeholder image for MediaItem.

🤖[deprecated] Generated by Copilot at 10d717e

No more blanks in the dark, we have placeholder
ImageMedia is our shield, it handles all the cases
We don't need TheImage, it was a weak illusion
We use NeoAvatar, it gives us more expression

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	10d717e
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6562d81fb1b5660008127d60
😎 Deploy Preview	https://deploy-preview-8252--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[reviewpad]

AI-Generated Summary: This pull request fixes the fallback behaviour for images in Nuxt. It adds multiple error checks for loading images in the ImageMedia.vue by trying to load the normal image first, then the original URL if the normal one fails, and finally loading a placeholder image if both previous attempts fail. There were changes in the MediaItem.vue file to update the image's placeholder. Moreover, TheImage component is replaced by the ImageMedia component in NeoAvatar.vue, and the error handling for image loading was removed since it's handled in the new component. It also adds alt attributes to images for better accessibility. In summary, these changes aim to improve the reliability and accessibility of image loading in the application.

[reviewpad]

Reviewpad Report

⚠️ Warnings

• Please link an issue to the pull request

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[codeclimate]

Code Climate has analyzed commit 10d717e and detected 0 issues on this pull request.

View more on Code Climate.

[yangwao]

thanks!
pay 20 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $20 @ 5.11 USD/DOT ~ 3.914 $DOT
🧗 1xjvRADwdJcnmUCLWerEHR4iGCT5EBTm4D4fzLLg4LcAC9p
🔗 0xba6e4568bdbf1ccee9f8f12c76a92eac2cf48d97abea834d078bd52ca16fd681

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues