feat(componets): introduce no-script prop

nuxt · Oct 2, 2020 · eb522b7 · eb522b7
1 parent 75dba09
commit eb522b7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/docs/content/en/nuxt-image.md b/docs/content/en/nuxt-image.md
@@ -153,6 +153,9 @@ As you may notice providers and presets has a different in their usage, and it i
   </code-block>
 </code-group>
 
+## `no-script`
+Genererate `<noscript>` tag for browsers that aren’t running javascript.
+
 ## `legacy`
 
 Using `nuxt-image` you should provider `width` and `height` for the component. These values are used to optimize image size and prevent [Cumulative Layout Shift](https://web.dev/cls/). But there are situation that we don't want to specify with and height for image. In this situations you can use `legacy` prop.  

diff --git a/src/runtime/nuxt-image-mixins.ts b/src/runtime/nuxt-image-mixins.ts
@@ -33,6 +33,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    noScript: {
+      type: Boolean,
+      default: false
+    },
     // `<img>` attrubutes
     alt: {
       type: String,

diff --git a/src/runtime/nuxt-image.ts b/src/runtime/nuxt-image.ts
@@ -51,9 +51,12 @@ export default {
       }
     })
 
-    const noScript = h('noscript', {
-      domProps: { innerHTML: imageHTML(this) }
-    }, [])
+    let noScript = null
+    if (this.noScript) {
+      noScript = h('noscript', {
+        domProps: { innerHTML: imageHTML(this) }
+      }, [])
+    }
 
     const placeholder = h('div', {
       class: '__nim_pl',

diff --git a/src/runtime/nuxt-picture.ts b/src/runtime/nuxt-picture.ts
@@ -63,9 +63,12 @@ export default {
       originalImage
     ])
 
-    const noScript = h('noscript', {
-      domProps: { innerHTML: pictureHTML(this) }
-    }, [])
+    let noScript = null
+    if (this.noScript) {
+      noScript = h('noscript', {
+        domProps: { innerHTML: pictureHTML(this) }
+      }, [])
+    }
 
     const placeholder = h('div', {
       class: '__nim_pl',