feat(img): support <img> attributes

nuxt · Sep 25, 2020 · 9ed71da · 9ed71da
1 parent df9470f
commit 9ed71da
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 16 deletions.
diff --git a/src/runtime/components/nuxt-image-mixins.ts b/src/runtime/components/nuxt-image-mixins.ts
@@ -17,10 +17,6 @@ export default {
             type: Boolean,
             default: false
         },
-        alt: {
-            type: String,
-            default: ''
-        },
         sets: {
             type: [String, Array],
             default: '',
@@ -36,7 +32,32 @@ export default {
         operations: {
             type: Object,
             default: () => ({})
-        }
+        },
+        // `<img>` attrubutes
+        alt: {
+            type: String,
+            default: ''
+        },
+        referrerpolicy: {
+            type: String,
+            default: undefined
+        },
+        usemap: {
+            type: String,
+            default: undefined,
+        },
+        longdesc: {
+            type: String,
+            default: undefined,
+        },
+        ismap: {
+            type: Boolean,
+            default: false
+        },
+        crossorigin: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
@@ -60,6 +81,17 @@ export default {
         }
     },
     computed: {
+        imgAttributes() {
+            let alt = this.alt ? this.alt : this.alt.split(/[\?#]/).shift().split('/').pop().split('.').shift();
+            return {
+                alt,
+                referrerpolicy: this.referrerpolicy,
+                usemap: this.usemap,
+                longdesc: this.longdesc,
+                ismap: this.ismap,
+                crossorigin: this.crossorigin,
+            }
+        },
         sizes() {
             let sizes = this.sets;
             if (typeof this.sets === 'string') {
@@ -113,7 +145,18 @@ export default {
         },
         loadOriginalImage() {
             this.loading = true
-        }
+        },
+        renderAttributesToString(attributes = {}) {
+            return Object.entries<string>(attributes)
+                .map(([key, value]) => value ? `${key}="${value}"` : '')
+                .filter(Boolean).join(' ')
+        },
+        renderImgAttributesToString(extraAttributes = {}) {
+            return this.renderAttributesToString({
+                ...this.imgAttributes,
+                ...extraAttributes
+            })
+        },
     },
     beforeDestroy () {
         this.$img.$observer.remove(this.$el)

diff --git a/src/runtime/components/nuxt-image.ts b/src/runtime/components/nuxt-image.ts
@@ -2,8 +2,8 @@ import nuxtImageMixin from './nuxt-image-mixins'
 
 import './nuxt-image.css'
 
-const imageHTML = ({ generatedSrc, generatedSrcset, generatedSizes, width, height, alt }) => 
-`<img class="__nim_org" src="${generatedSrc}" srcset="${generatedSrcset}" sizes="${generatedSizes}" width="${width}" height="${height}" alt="${alt}" >`
+const imageHTML = ({ generatedSrc, generatedSrcset, generatedSizes, width, height, renderImgAttributesToString }) => 
+`<img class="__nim_org" ${renderImgAttributesToString({ src: generatedSrc, srcset: generatedSrcset, sizes: generatedSizes, width, height })} >`
 
 export default {
     name: "NuxtImage",
@@ -13,7 +13,7 @@ export default {
             return this.sizes.map(({ width, url }) => width ? `${url} ${width}w` : url).join(', ')
         },
         generatedSizes() {
-            return this.sizes.map(({ width, media }) => width ? `${media} ${width}px` : media).reverse().join(', ')
+            return this.sizes.map(({ width, media }) => media ? `${media} ${width}px` : `${width}px`).reverse().join(', ')
         },
         generatedSrc() {
             if (this.sizes.length) {
@@ -40,9 +40,9 @@ export default {
                 src: this.loading ? this.generatedSrc : undefined,
                 srcset: this.loading ? this.generatedSrcset : undefined,
                 sizes: this.loading ? this.generatedSizes : undefined,
-                alt: this.alt,
                 width: this.width,
                 height: this.height,
+                ...this.imgAttributes,
             },
             on: {
                 load: () => {
@@ -80,7 +80,8 @@ export default {
                     src: this.generatedSrc,
                     srcset: this.generatedSrcset,
                     sizes: this.generatedSizes,
-                    alt: this.alt
+                    alt: this.alt,
+                    ...this.imgAttributes
                 }
             })
         }

diff --git a/src/runtime/components/nuxt-picture.ts b/src/runtime/components/nuxt-picture.ts
@@ -2,10 +2,10 @@ import nuxtImageMixin from './nuxt-image-mixins'
 
 import './nuxt-image.css'
 
-const pictureHTML = ({ generatedSrc, width, height, alt, sizes }) => 
+const pictureHTML = ({ generatedSrc, width, height, renderImgAttributesToString, sizes, renderAttributesToString }) => 
 `<picture>
-${sizes.map(s => `<source srcset="${s.url}"${s.type ? ` type="${s.type}"` : '' }${s.media ? ` media="${s.media}"` : '' }>`).join('\n')}
-<img class="__nim_org" src="${generatedSrc}" width="${width}" height="${height}" alt="${alt}">
+${sizes.map(s => `<source ${renderAttributesToString({ type: s.type, media: s.media, srcset: s.url })}>`).join('\n')}
+<img class="__nim_org" ${renderImgAttributesToString({ src: generatedSrc, width, height })}>
 </picture>
 `
 
@@ -42,9 +42,9 @@ export default {
             class: ['__nim_org'],
             attrs: {
                 src: this.loading ? this.generatedSrc : undefined,
-                alt: this.alt,
                 width: this.width,
                 height: this.height,
+                ...this.imgAttributes,
             },
             on: {
                 load: () => {
@@ -100,7 +100,7 @@ export default {
                     src: this.generatedSrc,
                     srcset: this.generatedSrcset,
                     sizes: this.generatedSizes,
-                    alt: this.alt
+                    ...this.imgAttributes,
                 }
             });
             return h('picture', {}, [