fix(nuxt-img): swap from placeholder when decode() fails on a loaded image

[chairulakmal]

🔗 Linked issue

fixes #2130

📚 Description

<NuxtImg placeholder> stays blurred forever when decode() rejects: the catch emits error and never sets placeholderLoaded. Chromium rejects decode() for images it can still display (crbug 40261318).

I now treat a rejection as a failure only when the image itself failed to load, via img.complete && img.naturalWidth > 0. I also added a mock and a test per branch as this path was untested; Image has no decode.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/image@2314

commit: 7a007e9

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6cd18be0-9d82-4775-a587-bfc5b19eb6cd

📥 Commits

Reviewing files that changed from the base of the PR and between 21b9573 and f95cae2.

📒 Files selected for processing (3)

• src/runtime/components/NuxtImg.vue
• test/nuxt/image.test.ts
• test/unit/bundle.test.ts

---

📝 Walkthrough

Walkthrough

The image decode rejection handler now distinguishes successfully completed images from failed images. Completed images with a positive natural width update placeholder state and emit load; failed images emit error. Tests add image decode mocks and cover both outcomes. The bundle-size snapshot changes from 11.4k to 11.5k.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to f95ca

This localized image-loading fix changes how decode failures are handled and adds coverage for the affected branches; no actionable merge-blocking risk remains beyond normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes address issue #2130 by preventing successfully loaded images from remaining stuck in the placeholder state.
Out of Scope Changes check	✅ Passed	All changes support the fix, including implementation logic, targeted tests, and the resulting bundle-size snapshot update.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly summarizes the main change: swapping from the placeholder when decode() fails after the image loads.
Description check	✅ Passed	The description explains the decode() failure scenario, the loading condition, and the added tests, which directly match the changeset.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov-commenter]

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 34.13%. Comparing base (ac483b4) to head (7a007e9).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/runtime/components/NuxtImg.vue	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2314      +/-   ##
==========================================
+ Coverage   32.61%   34.13%   +1.51%     
==========================================
  Files           7        7              
  Lines         371      375       +4     
  Branches      131      132       +1     
==========================================
+ Hits          121      128       +7     
+ Misses        194      191       -3     
  Partials       56       56              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.