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)
• ✨ 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: 5cc4a49

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 53.48%. Comparing base (7e52488) to head (cb76488).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1834      +/-   ##
==========================================
+ Coverage   53.47%   53.48%   +0.01%     
==========================================
  Files          79       79              
  Lines        3755     3756       +1     
  Branches      377      377              
==========================================
+ Hits         2008     2009       +1     
  Misses       1716     1716              
  Partials       31       31              

☔ 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.