feat(nuxt-img): expose <img> element

[LeonardoRick]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Expose the image element as its currently impossible to access it without a querySelector

[pkg-pr-new]

Open in StackBlitz

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

commit: fb9d22d

[codecov-commenter]

Codecov Report

❌ Patch coverage is 66.66667% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 7.06%. Comparing base (7efb6ef) to head (fb9d22d).

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

Additional details and impacted files

@@           Coverage Diff            @@
##            main   #1834      +/-   ##
========================================
+ Coverage   7.03%   7.06%   +0.02%     
========================================
  Files         77      77              
  Lines       3552    3554       +2     
  Branches     138     138              
========================================
+ Hits         250     251       +1     
- Misses      3254    3255       +1     
  Partials      48      48              

☔ View full report in Codecov by Sentry.
📢 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.

[danielroe]

what do you want to do with the image element?

[LeonardoRick]

@danielroe In my specific case I want to rotate the image in realtime. The rotate modifier was not working as it seems to not be suited for realtime updates. I see some people also wanting to access it.

My solution for now is using querySelector('img') but would be nice to access the element directly.

  () => {
    if (!self.value) return;
    const img = self.value.querySelector('img');
    if (!img) return;
    img.style.setProperty('--background-rotation', `${rotate}deg`);
  }

[LeonardoRick]

Hey! Any reason not to approve this one?

[vercel]

@LeonardoRick is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.