CSS class on <nuxt-picture> is appended to <picture> and not <img>

CSS classes on <nuxt-picture> goes to HTML element <picture>, however, it should go to <img> element. Current solution pretty much blocks devs from using utility classes/frameworks.

Example

Code

<nuxt-picture
	:src="post.featured_media"
	width="600"
	height="300"
	class="w-100 br-8"
/>

Actual result

<picture class="w-100 br-8">
	<source type="image/webp" srcset="...">
	<img src="....">
</picture>

Expected result

<picture>
	<source type="image/webp" srcset="...">
	<img src="...." class="w-100 br-8">
</picture>

[dannyalder88]

@LukaHarambasic I think the img tag inside a picture tag is always used to render the image and so its class list would apply no matter which source is used. But you are right, there may be times when you would want to target the picture container with a class as well.

@lucien144 Maybe an img-class prop might help in this case to apply classes directly to the img tag? Otherwise, you could target it in the CSS with .picture-class img {}. This could get annoying for CSS frameworks using utility classes though.

[dannyalder88]

@LukaHarambasic Yeah it would be a work around for #320. However, you can also use a deep selector to solve your issue:

<nuxt-picture class="image" ... />

<style lang="sass" scoped>
    .image
        // Styles for picture tag
        ::v-deep img 
            // Styles for img tag
</style>