From 4f7f8677682621509e124ab102eec155037d6be1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hans-J=C3=B8rgen=20Vedvik?= <hjvedvik@gmail.com>
Date: Wed, 7 Nov 2018 14:02:37 +0100
Subject: [PATCH] fix: lazy load external image urls

---
 gridsome/app/components/Image.js      | 19 +++++++++++++++++--
 gridsome/lib/webpack/modules/image.js |  8 ++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/gridsome/app/components/Image.js b/gridsome/app/components/Image.js
index 60ff801af..37148d1b5 100644
--- a/gridsome/app/components/Image.js
+++ b/gridsome/app/components/Image.js
@@ -12,7 +12,7 @@ export default {
   functional: true,
 
   props: {
-    src: { type: Object },
+    src: { type: [Object, String] },
     width: { type: String },
     alt: { type: String },
     immediate: { type: true },
@@ -30,12 +30,27 @@ export default {
 
   render: (h, { data, props, parent }) => {
     const isDev = process.env.NODE_ENV === 'development'
-    const { src, srcset, sizes, size, dataUri } = props.src
     const isLazy = typeof props.immediate === 'undefined'
     const classNames = (data.class || []).concat(['g-image'])
     const noscriptClass = classNames.slice()
     const res = []
 
+    let src = ''
+    let sizes = ''
+    let dataUri = ''
+    let srcset = []
+    let size = { width: undefined }
+
+    if (typeof props.src === 'string') {
+      src = props.src
+    } else {
+      src = props.src.src
+      srcset = props.src.srcset
+      sizes = props.src.sizes
+      size = props.src.size
+      dataUri = props.src.dataUri
+    }
+
     const ref = data.ref || `__image_${uid++}`
     const key = data.key || isDev ? ref : undefined
 
diff --git a/gridsome/lib/webpack/modules/image.js b/gridsome/lib/webpack/modules/image.js
index 90379bfb5..c65708287 100644
--- a/gridsome/lib/webpack/modules/image.js
+++ b/gridsome/lib/webpack/modules/image.js
@@ -1,3 +1,5 @@
+const isUrl = require('is-url')
+
 module.exports = () => ({
   postTransformNode (node) {
     if (node.tag === 'g-image') {
@@ -6,9 +8,11 @@ module.exports = () => ({
           if (!isStatic(attr.value)) return
 
           const value = extractValue(attr.value)
-          const query = createOptionsQuery(node.attrs)
 
-          attr.value = `require("!!image-loader?${query}!${value}")`
+          if (!isUrl(value)) {
+            const query = createOptionsQuery(node.attrs)
+            attr.value = `require("!!image-loader?${query}!${value}")`
+          }
 
           return
         }