fixes gatsbyjs#11085 handle imageReference nodes

packages/gatsby-remark-images/src/index.js

@@ -4,6 +4,7 @@ const {
   imageWrapperClass,
 } = require(`./constants`)
 const visitWithParents = require(`unist-util-visit-parents`)
+const getDefinitions = require('mdast-util-definitions');
 const path = require(`path`)
 const isRelativeUrl = require(`is-relative-url`)
 const _ = require(`lodash`)
@@ -41,6 +42,9 @@ module.exports = (
         node.type === `link`
     )
 
+  // Get all the available definitions in the markdown tree
+  const definitions = getDefinitions(markdownAST);
+
   // This will allow the use of html image tags
   // const rawHtmlNodes = select(markdownAST, `html`)
   let rawHtmlNodes = []
@@ -53,7 +57,7 @@ module.exports = (
   // This will only work for markdown syntax image tags
   let markdownImageNodes = []
 
-  visitWithParents(markdownAST, `image`, (node, ancestors) => {
+  visitWithParents(markdownAST, [`image`, `imageReference`], (node, ancestors) => {
     const inLink = ancestors.some(findParentLinks)
 
     markdownImageNodes.push({ node, inLink })
@@ -226,6 +230,12 @@ module.exports = (
     markdownImageNodes.map(
       ({ node, inLink }) =>
         new Promise(async (resolve, reject) => {
+          let refNode;
+          if (!node.hasOwnProperty('url') && node.hasOwnProperty('identifier')) {
+            //consider as imageReference node
+            refNode = node;
+            node = definitions(refNode.identifier);
+          }
           const fileType = node.url.slice(-3)
 
           // Ignore gifs as we can't process them,
@@ -242,7 +252,10 @@ module.exports = (
             )
 
             if (rawHTML) {
-              // Replace the image node with an inline HTML node.
+              // Replace the image or ref node with an inline HTML node.
+              if (refNode) {
+                node = refNode;
+              }
               node.type = `html`
               node.value = rawHTML
             }