1 files changed, 17 insertions, 1 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index adcd22f7876..b73eb4d9b9c 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import InlineDiffView from './inline_diff_view.vue';
 import ParallelDiffView from './parallel_diff_view.vue';
+import imageDiffHelper from '~/image_diff/helpers/index';
 
 export default {
   components: {
@@ -17,11 +18,21 @@ export default {
   computed: {
     ...mapGetters(['isInlineView', 'isParallelView']),
   },
+  mounted() {
+    if (this.diffFile.imageDiffHtml) {
+      const canCreateNote = true;
+      const renderCommentBadge = true;
+      imageDiffHelper.initImageDiff($(this.$el).closest('.file-holder')[0], canCreateNote, renderCommentBadge);
+    }
+  },
 };
 </script>
 
 <template>
-  <div class="diff-content">
+  <div
+    v-if="diffFile.text"
+    class="diff-content"
+  >
     <div class="diff-viewer">
       <inline-diff-view
         v-if="isInlineView"
@@ -35,4 +46,9 @@ export default {
       />
     </div>
   </div>
+  <div
+    v-else
+    v-html="diffFile.imageDiffHtml"
+  >
+  </div>
 </template>