fix(gatsby-remark-images): ensure query string is ignored when detecting images (#11743)

anotherjames · DSchau · commit 37cc21f1fa5c · 2019-02-15T12:35:21.000-06:00
## Description

Referencing an image in markdown like this:
```
![Alt text](../path/to/image.png?raw=true)
```
Does not load the image.

This PR uses `query-string` to parse the URL out of the path.

## Related Issues

(No issue opened yet.)

This is my first PR, I hope it's ok!
diff --git a/packages/gatsby-remark-images/package.json b/packages/gatsby-remark-images/package.json
@@ -12,6 +12,7 @@
     "is-relative-url": "^2.0.0",
     "lodash": "^4.17.10",
     "mdast-util-definitions": "^1.2.0",
+    "query-string": "^6.1.0",
     "slash": "^1.0.0",
     "unist-util-select": "^1.5.0",
     "unist-util-visit-parents": "^2.0.1"
diff --git a/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-images/src/__tests__/__snapshots__/index.js.snap
@@ -124,3 +124,41 @@ exports[`it transforms images in markdown 1`] = `
   </span>
   </a>"
 `;
+
+exports[`it transforms HTML img tags with query strings 1`] = `
+"<a class=\\"gatsby-resp-image-link\\" href=\\"not-a-real-dir/image/my-image.jpeg\\" style=\\"display: block\\" target=\\"_blank\\" rel=\\"noopener\\">
+    <span class=\\"gatsby-resp-image-wrapper\\" style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\">
+    <span class=\\"gatsby-resp-image-background-image\\" style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url(&apos;url(&apos;data:image/png;base64, iVBORw)&apos;); background-size: cover; display: block;\\"></span>
+    <img class=\\"gatsby-resp-image-image\\" style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\" alt=\\"my image\\" title=\\"\\" src=\\"not-a-real-dir/image/my-image.jpeg\\" srcset=\\"not-a-real-dir/image/my-image.jpeg, not-a-real-dir/image/my-image.jpeg\\" sizes=\\"(max-width: 650px) 100vw, 650px\\">
+  </span>
+  </a>"
+`;
+
+exports[`it transforms images in markdown with query strings 1`] = `
+"<a
+    class=\\"gatsby-resp-image-link\\"
+    href=\\"not-a-real-dir/images/my-image.jpeg\\"
+    style=\\"display: block\\"
+    target=\\"_blank\\"
+    rel=\\"noopener\\"
+  >
+    <span
+    class=\\"gatsby-resp-image-wrapper\\"
+    style=\\"position: relative; display: block;  max-width: 300px; margin-left: auto; margin-right: auto;\\"
+  >
+    <span
+      class=\\"gatsby-resp-image-background-image\\"
+      style=\\"padding-bottom: 133.33333333333331%; position: relative; bottom: 0; left: 0; background-image: url('url('data:image/png;base64, iVBORw)'); background-size: cover; display: block;\\"
+    ></span>
+    <img
+        class=\\"gatsby-resp-image-image\\"
+        style=\\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\\"
+        alt=\\"image\\"
+        title=\\"\\"
+        src=\\"not-a-real-dir/images/my-image.jpeg\\"
+        srcset=\\"not-a-real-dir/images/my-image.jpeg, not-a-real-dir/images/my-image.jpeg\\"
+        sizes=\\"(max-width: 650px) 100vw, 650px\\"
+      />
+  </span>
+  </a>"
+`;
diff --git a/packages/gatsby-remark-images/src/__tests__/index.js b/packages/gatsby-remark-images/src/__tests__/index.js
@@ -15,6 +15,7 @@ jest.mock(`gatsby-plugin-sharp`, () => {
 })
 
 const Remark = require(`remark`)
+const queryString = require(`query-string`)
 
 const plugin = require(`../`)
 
@@ -53,7 +54,7 @@ const createPluginOptions = (content, imagePaths = `/`) => {
   return {
     files: [].concat(imagePaths).map(imagePath => {
       return {
-        absolutePath: `${dirName}/${imagePath}`,
+        absolutePath: queryString.parseUrl(`${dirName}/${imagePath}`).url,
       }
     }),
     markdownNode: createNode(content),
@@ -268,3 +269,37 @@ test(`it handles goofy nesting properly`, async () => {
   expect(node.value).toMatchSnapshot()
   expect(node.value).not.toMatch(`<html>`)
 })
+
+test(`it transforms HTML img tags with query strings`, async () => {
+  const imagePath = `image/my-image.jpeg?query=string`
+
+  const content = `
+<img src="./${imagePath}">
+  `.trim()
+
+  const nodes = await plugin(createPluginOptions(content, imagePath))
+
+  expect(nodes.length).toBe(1)
+
+  const node = nodes.pop()
+  expect(node.type).toBe(`html`)
+  expect(node.value).toMatchSnapshot()
+  expect(node.value).not.toMatch(`<html>`)
+})
+
+test(`it transforms images in markdown with query strings`, async () => {
+  const imagePath = `images/my-image.jpeg?query=string`
+  const content = `
+
+![image](./${imagePath})
+  `.trim()
+
+  const nodes = await plugin(createPluginOptions(content, imagePath))
+
+  expect(nodes.length).toBe(1)
+
+  const node = nodes.pop()
+  expect(node.type).toBe(`html`)
+  expect(node.value).toMatchSnapshot()
+  expect(node.value).not.toMatch(`<html>`)
+})
diff --git a/packages/gatsby-remark-images/src/index.js b/packages/gatsby-remark-images/src/index.js
@@ -6,6 +6,7 @@ const {
 const visitWithParents = require(`unist-util-visit-parents`)
 const getDefinitions = require(`mdast-util-definitions`)
 const path = require(`path`)
+const queryString = require(`query-string`)
 const isRelativeUrl = require(`is-relative-url`)
 const _ = require(`lodash`)
 const { fluid } = require(`gatsby-plugin-sharp`)
@@ -67,6 +68,18 @@ module.exports = (
     }
   )
 
+  const getImageInfo = uri => {
+    const { url, query } = queryString.parseUrl(uri)
+    return {
+      ext: path
+        .extname(url)
+        .split(`.`)
+        .pop(),
+      url,
+      query,
+    }
+  }
+
   // Takes a node and generates the needed images and then returns
   // the needed HTML replacement for the image
   const generateImagesAndUpdateNode = async function(
@@ -80,7 +93,7 @@ module.exports = (
     const parentNode = getNode(markdownNode.parent)
     let imagePath
     if (parentNode && parentNode.dir) {
-      imagePath = slash(path.join(parentNode.dir, node.url))
+      imagePath = slash(path.join(parentNode.dir, getImageInfo(node.url).url))
     } else {
       return null
     }
@@ -113,7 +126,7 @@ module.exports = (
     const presentationWidth = fluidResult.presentationWidth
 
     // Generate default alt tag
-    const srcSplit = node.url.split(`/`)
+    const srcSplit = getImageInfo(node.url).url.split(`/`)
     const fileName = srcSplit[srcSplit.length - 1]
     const fileNameNoExt = fileName.replace(/\.[^/.]+$/, ``)
     const defaultAlt = fileNameNoExt.replace(/[^A-Z0-9]/gi, ` `)
@@ -264,7 +277,7 @@ module.exports = (
               return resolve()
             }
           }
-          const fileType = node.url.slice(-3)
+          const fileType = getImageInfo(node.url).ext
 
           // Ignore gifs as we can't process them,
           // svgs as they are already responsive by definition
@@ -328,7 +341,7 @@ module.exports = (
                 return resolve()
               }
 
-              const fileType = formattedImgTag.url.slice(-3)
+              const fileType = getImageInfo(formattedImgTag.url).ext
 
               // Ignore gifs as we can't process them,
               // svgs as they are already responsive by definition
