feat: add imgAttrs property to <nuxt-picture> (#445)

nuxt · Jan 13, 2022 · 448d9ef · 448d9ef
1 parent 512a54a
commit 448d9ef
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/docs/content/en/2.components/2.nuxt-picture.md b/docs/content/en/2.components/2.nuxt-picture.md
@@ -16,9 +16,22 @@ Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-U
  See props supported by <a href="/components/nuxt-img#props">nuxt-img</a>
 :::
 
-### legacyFormat
+### `legacyFormat`
 
 Format used for fallback. Default is conditional:
 
 - If original format supports transparency (`png`, `webp` and `gif`), `png` is used for fallback
 - Otherwise `jpeg` is used for fallback
+
+### `imgAttrs`
+
+Allows you to set additional HTML-attributes on the `img` element.
+
+**Example:**
+
+```html
+<nuxt-picture
+  src="/nuxt-icon.png"
+  :imgAttrs="{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}"
+/>
+```
diff --git a/src/runtime/components/nuxt-picture.vue b/src/runtime/components/nuxt-picture.vue
@@ -7,7 +7,7 @@
       :sizes="nSources[1].sizes"
     >
     <img
-      v-bind="nImgAttrs"
+      v-bind="{...nImgAttrs, ...imgAttrs}"
       :src="nSources[0].src"
       :srcset="nSources[0].srcset"
       :sizes="nSources[0].sizes"
@@ -28,7 +28,8 @@ export default defineComponent({
   name: 'NuxtPicture',
   mixins: [imageMixin],
   props: {
-    legacyFormat: { type: String, default: null }
+    legacyFormat: { type: String, default: null },
+    imgAttrs: { type: Object, default: null }
   },
   computed: {
     isTransparent (): boolean {