fix(image): render fallback as html string

gridsome · Nov 10, 2018 · 738ef23 · 738ef23
1 parent e38b243
commit 738ef23
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 14 deletions.
diff --git a/gridsome/__tests__/__snapshots__/ImageProcessQueue.spec.js.snap b/gridsome/__tests__/__snapshots__/ImageProcessQueue.spec.js.snap
@@ -6,7 +6,7 @@ exports[`disable lazy loading 1`] = `"<img class=\\"g-image\\" src=\\"/assets/st
 
 exports[`generate srcset for image 1`] = `"data:image/svg+xml,%3csvg fill='none' viewBox='0 0 1000 600' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter id='__svg-blur-0'%3e%3cfeGaussianBlur in='SourceGraphic' stdDeviation='40'/%3e%3c/filter%3e%3c/defs%3e%3cimage x='0' y='0' filter='url(%23__svg-blur-0)' width='1000' height='600' xlink:href='data:image/png%3bbase64%2ciVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAIAAAD7pgrOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABmElEQVRYw%2b2X3W6CQBBGff/nMF6AIoKCAgVFUJDy90Y9YRNCNe0FTUlJZy7M7PBt/M7MIrJ4n3ksBEAABEAABEAABEAABOBfA5Rl2edFUTxVXkNpXvdOClB2oZI8z1XeJ4/Ho3fW26VCnWVVVSRPe6cG4Iv3%2bz2fYRjquh7HMYmmaUmSBEFAhUQ5w67ymmWZaZqu66Zpul6vPc9DgxI9muFYfh0AN5jA7u12wxA%2bDoeD4zgsbds%2bHo/X65Vl0zRvXWCRHMeWZYHKFgTIELMXpRrIdAB0q65r3/eVD5ZMAx9c2u12p9MJQyChAWm5XF4ul7ZtqXAV9/hmdPAwELZQYTijD9LII8TQccwc%2bPooipwuzuczLkGiQp2uQ7harVgCABgCsMEgQQC22jL6/PzoJsYWneZIbDYbOk2bSe73O54Mw6DCBLgxqKtTTpu32y0YtB8BlxCToJ/6Hhj%2bApZfB576/Hvln36QDVtbdCFPYgEQAAEQAAEQAAEQAAGYAwD/tHln4LUz7YKkX5LwtsQ7xgwmUHyOYYX8A4oOoFMobbRdAAAAAElFTkSuQmCC' /%3e%3c/svg%3e"`;
 
-exports[`generate srcset for image 2`] = `"<img class=\\"g-image g-image--lazy\\" src=\\"data:image/svg+xml,%3csvg fill='none' viewBox='0 0 1000 600' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter id='__svg-blur-0'%3e%3cfeGaussianBlur in='SourceGraphic' stdDeviation='40'/%3e%3c/filter%3e%3c/defs%3e%3cimage x='0' y='0' filter='url(%23__svg-blur-0)' width='1000' height='600' xlink:href='data:image/png%3bbase64%2ciVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAIAAAD7pgrOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABmElEQVRYw%2b2X3W6CQBBGff/nMF6AIoKCAgVFUJDy90Y9YRNCNe0FTUlJZy7M7PBt/M7MIrJ4n3ksBEAABEAABEAABEAABOBfA5Rl2edFUTxVXkNpXvdOClB2oZI8z1XeJ4/Ho3fW26VCnWVVVSRPe6cG4Iv3%2bz2fYRjquh7HMYmmaUmSBEFAhUQ5w67ymmWZaZqu66Zpul6vPc9DgxI9muFYfh0AN5jA7u12wxA%2bDoeD4zgsbds%2bHo/X65Vl0zRvXWCRHMeWZYHKFgTIELMXpRrIdAB0q65r3/eVD5ZMAx9c2u12p9MJQyChAWm5XF4ul7ZtqXAV9/hmdPAwELZQYTijD9LII8TQccwc%2bPooipwuzuczLkGiQp2uQ7harVgCABgCsMEgQQC22jL6/PzoJsYWneZIbDYbOk2bSe73O54Mw6DCBLgxqKtTTpu32y0YtB8BlxCToJ/6Hhj%2bApZfB576/Hvln36QDVtbdCFPYgEQAAEQAAEQAAEQAAGYAwD/tHln4LUz7YKkX5LwtsQ7xgwmUHyOYYX8A4oOoFMobbRdAAAAAElFTkSuQmCC' /%3e%3c/svg%3e\\" width=\\"1000\\" data-srcset=\\"/assets/static/1000x600-w480.test.png 480w, /assets/static/1000x600-w1000.test.png 1000w\\" data-sizes=\\"(max-width: 1000px) 100vw, 1000px\\" data-src=\\"/assets/static/1000x600-w1000.test.png\\">"`;
+exports[`generate srcset for image 2`] = `"<img class=\\"g-image g-image--lazy g-image--loading\\" src=\\"data:image/svg+xml,%3csvg fill='none' viewBox='0 0 1000 600' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter id='__svg-blur-0'%3e%3cfeGaussianBlur in='SourceGraphic' stdDeviation='40'/%3e%3c/filter%3e%3c/defs%3e%3cimage x='0' y='0' filter='url(%23__svg-blur-0)' width='1000' height='600' xlink:href='data:image/png%3bbase64%2ciVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAIAAAD7pgrOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABmElEQVRYw%2b2X3W6CQBBGff/nMF6AIoKCAgVFUJDy90Y9YRNCNe0FTUlJZy7M7PBt/M7MIrJ4n3ksBEAABEAABEAABEAABOBfA5Rl2edFUTxVXkNpXvdOClB2oZI8z1XeJ4/Ho3fW26VCnWVVVSRPe6cG4Iv3%2bz2fYRjquh7HMYmmaUmSBEFAhUQ5w67ymmWZaZqu66Zpul6vPc9DgxI9muFYfh0AN5jA7u12wxA%2bDoeD4zgsbds%2bHo/X65Vl0zRvXWCRHMeWZYHKFgTIELMXpRrIdAB0q65r3/eVD5ZMAx9c2u12p9MJQyChAWm5XF4ul7ZtqXAV9/hmdPAwELZQYTijD9LII8TQccwc%2bPooipwuzuczLkGiQp2uQ7harVgCABgCsMEgQQC22jL6/PzoJsYWneZIbDYbOk2bSe73O54Mw6DCBLgxqKtTTpu32y0YtB8BlxCToJ/6Hhj%2bApZfB576/Hvln36QDVtbdCFPYgEQAAEQAAEQAAEQAAGYAwD/tHln4LUz7YKkX5LwtsQ7xgwmUHyOYYX8A4oOoFMobbRdAAAAAElFTkSuQmCC' /%3e%3c/svg%3e\\" width=\\"1000\\" data-srcset=\\"/assets/static/1000x600-w480.test.png 480w, /assets/static/1000x600-w1000.test.png 1000w\\" data-sizes=\\"(max-width: 1000px) 100vw, 1000px\\" data-src=\\"/assets/static/1000x600-w1000.test.png\\">"`;
 
 exports[`generate srcset for image 3`] = `"<noscript><img class=\\"g-image g-image--lazy g-image--loaded\\" src=\\"/assets/static/1000x600-w1000.test.png\\" width=\\"1000\\"></noscript>"`;
 

diff --git a/gridsome/app/components/Image.js b/gridsome/app/components/Image.js
@@ -32,7 +32,7 @@ export default {
     const isDev = process.env.NODE_ENV === 'development'
     const isLazy = typeof props.immediate === 'undefined'
     const classNames = (data.class || []).concat(['g-image'])
-    const noscriptClass = classNames.slice()
+    const noscriptClassNames = classNames.slice()
     const res = []
 
     let src = ''
@@ -84,22 +84,23 @@ export default {
       }
 
       classNames.push('g-image--lazy')
-      noscriptClass.push('g-image--loaded')
+      classNames.push('g-image--loading')
+      noscriptClassNames.push('g-image--loaded')
 
       parent.$once('hook:mounted', () => onMount(parent.$refs[ref]))
       parent.$once('hook:updated', () => onMount(parent.$refs[ref]))
       parent.$once('hook:beforeDestroy', () => onDestroy(parent.$refs[ref]))
 
-      res.push(h('noscript', null, [
-        h('img', {
-          class: noscriptClass,
-          attrs: {
-            src,
-            alt: props.alt,
-            width: size.width
-          }
-        })
-      ]))
+      // must render as innerHTML to make hydration work
+      res.push(h('noscript', {
+        domProps: {
+          innerHTML: `` + 
+            `<img src="${src}" class="${noscriptClassNames.join(' ')}"` +
+            (size.width ? ` width="${size.width}"`: '') +
+            (props.alt ? ` alt="${props.alt}"` : '') +
+            `>`
+        }
+      }))
     }
 
     return res
@@ -151,6 +152,7 @@ function loadImage (el) {
     delete el.dataset.sizes
     delete el.onload
 
+    el.classList.remove('g-image--loading')
     el.classList.add('g-image--loaded')
   }
 

diff --git a/gridsome/app/head.js b/gridsome/app/head.js
@@ -13,7 +13,7 @@ Vue.use(Meta, {
 const head = {
   title: config.siteName,
   titleTemplate: config.titleTemplate,
-  __dangerouslyDisableSanitizers: ['style', 'script'],
+  __dangerouslyDisableSanitizers: ['style', 'script', 'noscript'],
   __dangerouslyDisableSanitizersByTagID: {},
   htmlAttrs: {
     lang: 'en'
@@ -24,6 +24,7 @@ const head = {
     { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' }
   ],
   base: {},
+  noscript: [],
   script: [],
   style: [],
   link: []
@@ -46,4 +47,8 @@ icons.touchicons.forEach(({ width, height, src: href }) => {
   })
 })
 
+head.noscript.push({
+  innerHTML: `<style>.g-image--loading{display:none;}</style>`
+})
+
 export default head
diff --git a/gridsome/lib/app/queue/ImageProcessQueue.js b/gridsome/lib/app/queue/ImageProcessQueue.js
@@ -157,6 +157,8 @@ class ImageProcessQueue {
         (options.height ? ` height="${options.height}"` : '') +
         (options.alt ? ` alt="${options.alt}">` : '>') +
         `</noscript>`
+
+      classNames.push('g-image--loading')
     }
 
     results.imageHTML = '' +