<custom-img
class="decrease-item"
img-src="images/minus-green.svg"
@click="event => callDecreaseItem(event, itemId)"
/>
Above is the block where an image component is being called
<template>
<picture>
<source type="image/svg" :srcset="imgSrc" />
<source type="image/webp" :srcset="imgSrc" />
<source type="image/avif" :srcset="imgSrc" />
<img :src="imgSrc" :alt="imgAlt" />
</picture>
</template>
Above is the <custom-img/> component.
By default the class name given to the <custom-img/> component is added to the picture tag.
Is there any way to add the class name to the image tag of the <custom-img/> component as the component renders?
You may want to disable attribute inheritance, using inheritAttrs: false on your custom-img component,
and use v-bind="$attrs" on your child <img> element.
<template>
<picture>
<source type="image/svg" :srcset="imgSrc" />
<source type="image/webp" :srcset="imgSrc" />
<source type="image/avif" :srcset="imgSrc" />
<img v-bind="$attrs" :src="imgSrc" :alt="imgAlt" />
</picture>
</template>
<script>
export default {
inheritAttrs: false,
// ...
}
</script>
That way the class attribute, as well as any non prop attribute, will be placed on your child <img> element.