<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" />Arriba está el bloque donde se llama a un componente de imagen
<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> Arriba está el componente <custom-img/> .
De forma predeterminada, el nombre de clase dado al componente <custom-img/> se agrega a la etiqueta de la picture .
¿Hay alguna forma de agregar el nombre de la clase a la etiqueta de imagen del componente <custom-img/> a medida que se procesa el componente?
Es posible que desee deshabilitar la herencia de atributos , usando inheritAttrs: false en su componente custom-img , y use v-bind="$attrs" en su elemento secundario <img> .
<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> De esa manera, el atributo de clase, así como cualquier otro atributo que no sea prop, se colocará en el elemento <img> de su hijo.