1 files changed, 13 insertions, 3 deletions
diff --git a/app/assets/javascripts/notebook/cells/markdown.vue b/app/assets/javascripts/notebook/cells/markdown.vue
index 0f4cec67ce8..1384c9c40b3 100644
--- a/app/assets/javascripts/notebook/cells/markdown.vue
+++ b/app/assets/javascripts/notebook/cells/markdown.vue
@@ -1,5 +1,4 @@
 <script>
-/* eslint-disable vue/no-v-html */
 import katex from 'katex';
 import marked from 'marked';
 import { sanitize } from '~/lib/dompurify';
@@ -95,7 +94,16 @@ renderer.image = function image(href, title, text) {
   const attachmentHeader = `attachment:`; // eslint-disable-line @gitlab/require-i18n-strings
 
   if (!this.attachments || !href.startsWith(attachmentHeader)) {
-    return this.originalImage(href, title, text);
+    let relativeHref = href;
+
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    if (!(href.startsWith('http') || href.startsWith('data:'))) {
+      // These are images within the repo. This will only work if the image
+      // is relative to the path where the file is located
+      relativeHref = this.relativeRawPath + href;
+    }
+
+    return this.originalImage(relativeHref, title, text);
   }
 
   let img = ``;
@@ -130,6 +138,7 @@ export default {
   components: {
     prompt: Prompt,
   },
+  inject: ['relativeRawPath'],
   props: {
     cell: {
       type: Object,
@@ -139,6 +148,7 @@ export default {
   computed: {
     markdown() {
       renderer.attachments = this.cell.attachments;
+      renderer.relativeRawPath = this.relativeRawPath;
 
       return sanitize(marked(this.cell.source.join('').replace(/\\/g, '\\\\')), markdownConfig);
     },
@@ -149,7 +159,7 @@ export default {
 <template>
   <div class="cell text-cell">
     <prompt />
-    <div class="markdown" v-html="markdown"></div>
+    <div class="markdown" v-html="markdown /* eslint-disable-line vue/no-v-html */"></div>
   </div>
 </template>