1 files changed, 14 insertions, 4 deletions
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index 328c7e3fd32..eb7e24734ce 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -28,6 +28,8 @@ export default {
     return {
       width: 0,
       height: 0,
+      renderedWidth: 0,
+      renderedHeight: 0,
     };
   },
   computed: {
@@ -63,11 +65,14 @@ export default {
         this.height = contentImg.naturalHeight;
 
         this.$nextTick(() => {
+          this.renderedWidth = contentImg.clientWidth;
+          this.renderedHeight = contentImg.clientHeight;
+
           this.$emit('imgLoaded', {
             width: this.width,
             height: this.height,
-            renderedWidth: contentImg.clientWidth,
-            renderedHeight: contentImg.clientHeight,
+            renderedWidth: this.renderedWidth,
+            renderedHeight: this.renderedHeight,
           });
         });
       }
@@ -77,9 +82,14 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div data-testid="image-viewer">
     <div :class="innerCssClasses" class="position-relative">
-      <img ref="contentImg" :src="path" @load="onImgLoad" /> <slot name="image-overlay"></slot>
+      <img ref="contentImg" :src="path" @load="onImgLoad" />
+      <slot
+        name="image-overlay"
+        :rendered-width="renderedWidth"
+        :rendered-height="renderedHeight"
+      ></slot>
     </div>
     <p v-if="renderInfo" class="image-info">
       <template v-if="hasFileSize">