feat(VImg): pass attributes to the underlying <img> (#22439)

J-Sek · web-flow · commit 71e01aaeef32 · 2025-12-19T15:27:05.000+01:00
resolves #18860 closes #18907
diff --git a/packages/vuetify/src/components/VImg/VImg.tsx b/packages/vuetify/src/components/VImg/VImg.tsx
@@ -28,6 +28,7 @@ import {
 } from 'vue'
 import {
   convertToUnit,
+  filterInputAttrs,
   genericComponent,
   getCurrentInstance,
   propsFactory,
@@ -105,6 +106,8 @@ export const VImg = genericComponent<VImgSlots>()({
 
   directives: { vIntersect },
 
+  inheritAttrs: false,
+
   props: makeVImgProps(),
 
   emits: {
@@ -113,7 +116,7 @@ export const VImg = genericComponent<VImgSlots>()({
     error: (value: string | undefined) => true,
   },
 
-  setup (props, { emit, slots }) {
+  setup (props, { attrs, emit, slots }) {
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color)
     const { roundedClasses } = useRounded(props)
     const vm = getCurrentInstance('VImg')
@@ -348,6 +351,8 @@ export const VImg = genericComponent<VImgSlots>()({
 
     useRender(() => {
       const responsiveProps = VResponsive.filterProps(props)
+      const [rootAttrs, imageAttrs] = filterInputAttrs(attrs)
+
       return (
         <VResponsive
           class={[
@@ -366,6 +371,7 @@ export const VImg = genericComponent<VImgSlots>()({
             props.style,
           ]}
           { ...responsiveProps }
+          { ...rootAttrs }
           aspectRatio={ aspectRatio.value }
           aria-label={ props.alt }
           role={ props.alt ? 'img' : undefined }
@@ -376,7 +382,7 @@ export const VImg = genericComponent<VImgSlots>()({
         >{{
           additional: () => (
             <>
-              <__image />
+              <__image { ...imageAttrs } />
               <__preloadImage />
               <__gradient />
               <__placeholder />
