fix(nuxt-picture): only pass defined props to <nuxt-img> component (#…

…620) Co-authored-by: Pooya Parsa <pooya@pi0.io>
nuxt · Nov 24, 2022 · 522ffa2 · 522ffa2
1 parent 0a67766
commit 522ffa2
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/runtime/components/nuxt-picture.ts b/src/runtime/components/nuxt-picture.ts
@@ -61,6 +61,14 @@ export default defineComponent({
       useHead({ link: [link] })
     }
 
+    // Only passdown supported <image> attributes
+    const imgAttrs = { ...props.imgAttrs }
+    for (const key in ctx.attrs) {
+      if (key in baseImageProps && !(key in imgAttrs)) {
+        imgAttrs[key] = ctx.attrs[key]
+      }
+    }
+
     return () => h('picture', { key: nSources.value[0].src }, [
       ...(nSources.value?.[1]
         ? [h('source', {
@@ -71,8 +79,7 @@ export default defineComponent({
         : []),
       h('img', {
         ..._base.attrs.value,
-        ...props.imgAttrs,
-        ...ctx.attrs,
+        ...imgAttrs,
         src: nSources.value[0].src,
         sizes: nSources.value[0].sizes,
         srcset: nSources.value[0].srcset