✅ Live Preview ready!

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

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.

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?

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.

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

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.

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.

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

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

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?