feat: expose CSS class to underyling <img> element

[nathanchase]

This allows a user to apply a custom class to the underyling original <img> element.

<!-- Apply a static class to the original image -->
<nuxt-img src="/nuxt.png" img-class="custom" />

<!-- Apply a dynamic class to the original image -->
<nuxt-img src="/nuxt.png" :img-class="custom" />

Use case:

• The user wants to utilize the placeholder prop to have a fallback image, but wants to manipulate the loaded image src's display directly, rather than using :deep to style the <img> rendered by <NuxtImg> .

[nuxt-studio[bot]]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Image	Edit on Studio ↗︎	View Live Preview	1363890005bd81887b97ff0c6060b1037ed85ea9

[danielroe]

Is there a reason <nuxt-img class="custom" /> doesn't work?

[nathanchase]

Is there a reason <nuxt-img class="custom" /> doesn't work?

Yes, because it will apply to the placeholder as well. There needs to be a way to style both the placeholder image AND the actual image differently.

[danielroe]

I wonder if it might be more useful to have a data attribute (data-placeholder?) to allow styling with/without placeholder directly in CSS rather than providing options for passing separate classes through. What do you think?

[nathanchase]

Possibly - although what if someone needs to style the placeholder?

The use case that led me down this path was that I wanted to have a placeholder image load, which then gets replaced by the loaded src image. This happens with an abrupt flip from placeholder to src image, which you could transition with CSS, but not without the ability to style both the placeholder AND the src image.

[nathanchase]

I suppose with data-placeholder you would be able to style it like so:

:deep([data-placeholder]) {
   // styles go here
}

but that isn't particularly elegant...

[atinux]

Thank you for the PR! I would also go with the data-placeholder attribute seems the class is the most easy to understand about what you are styling.

[nathanchase]

As long as there is a way to style both the underlying image and the placeholder image, I'm ambivalent on the implementation.

So the thought is that you'd have to use :deep to style the img, and the [data-placeholder]?

Either way, that data-placeholder attribute would need to be added to the module.

[nathanchase]

Also, it would be nice to have an event that is emitted when the NuxtImg changes from displaying the placeholder image to the main image, so you could do something like:

<NuxtImg src='/images/user.png' placeholder="/images/default_user.png" @placeholder-replaced="doSomething" /> // if you needed to hook into when the placeholder is replaced

and

<NuxtImg src='/images/user.png' placeholder="/images/default_user.png" @main-image-loaded="doSomething" /> // if you needed to hook into the main image loading after placeholder was displayed

[nathanchase]

I've also been trying to figure out how to hook into the HTMLImageElement's complete property, as that does not seem to be a reactive value bubbled up to <NuxtImg>. https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete

[danielroe]

I feel it makes more sense to have a placeholder-class that applies to placeholder. Anything passed with class will apply to both placeholder + loaded image. You can style with img:not(.my-placeholder-class) for example.

How about that?