fix: lazy load external image urls

gridsome · Nov 8, 2018 · 4f7f867 · 4f7f867
1 parent 2be21e5
commit 4f7f867
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git 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
@@ -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
         }