Moved markdown image loading to a static asset

src/components/Markdown.js

@@ -109,7 +109,7 @@ function Link({ href, children }) {
   }
 }
 
-function Markdown({ source }) {
+function Markdown({ source, assets }) {
   const renderers = {
     paragraph: Paragraph,
     heading: Heading,
@@ -123,7 +123,13 @@ function Markdown({ source }) {
     tableRow: TableRow,
     tableCell: TableCell,
   };
-  return <ReactMarkdown source={source} renderers={renderers} />;
+  return (
+    <ReactMarkdown
+      source={source}
+      renderers={renderers}
+      transformImageUri={(uri) => assets[uri]}
+    />
+  );
 }
 
 export default Markdown;

src/docs/assets/index.js

@@ -0,0 +1,5 @@
+import audioSharingFaq from "./AudioSharingFAQ.png";
+
+export default {
+  audioSharingFaq,
+};

src/docs/faq/radio.md

@@ -4,7 +4,7 @@
 
 When using audio sharing you must select the **Share audio** option when choosing the browser tab or screen to share. Support for sharing audio depends on browser and operating system. Currently Google Chrome on Windows allows you to share the audio of any tab or an entire screen while on MacOS you can only share the audio of a tab. For an example of selecting the **Share audio** option for a tab on MacOS see Figure 1.
 
-![Figure 1 Using Audio Sharing](/docs/AudioSharingFAQ.png)
+![Figure 1 Using Audio Sharing](audioSharingFaq)
 **Figure 1 Using Audio Sharing.** First select what type of content you would like to share. Second select the content. Third select Share audio. Fourth select Share.
 
 ### Browser not supported for audio sharing.

src/routes/FAQ.js

@@ -5,6 +5,8 @@ import raw from "raw.macro";
 import Footer from "../components/Footer";
 import Markdown from "../components/Markdown";
 
+import assets from "../docs/assets";
+
 const connection = raw("../docs/faq/connection.md");
 const radio = raw("../docs/faq/radio.md");
 const saving = raw("../docs/faq/saving.md");
@@ -31,13 +33,13 @@ function FAQ() {
           Frequently Asked Questions
         </Text>
         <div id="connection">
-          <Markdown source={connection} />
+          <Markdown source={connection} assets={assets} />
         </div>
         <div id="radio">
-          <Markdown source={radio} />
+          <Markdown source={radio} assets={assets} />
         </div>
         <div id="saving">
-          <Markdown source={saving} />
+          <Markdown source={saving} assets={assets} />
         </div>
       </Flex>
       <Footer />