expose <img> element on nuxtImg through defineExpose

[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)
• [X] ✨ 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[bot]]

Open in StackBlitz

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

commit: fb9d22d

[codecov-commenter]

Codecov Report

:x: Patch coverage is 66.66667% with 1 line in your changes missing coverage. Please review. :white_check_mark: 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 :warning:

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              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

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

[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[bot]]

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

A member of the Team first needs to authorize it.