Fixed rendering of the image blobs

We should not alter (encode) URL when outputting the blobs. Otherwise
uploading the images is broken in WebIDE.
See https://gitlab.com/gitlab-org/gitlab/-/issues/325864 for more info

app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue

@@ -3,6 +3,8 @@ import { throttle } from 'lodash';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { encodeSaferUrl } from '~/lib/utils/url_utility';
 
+const BLOB_PREFIX = 'blob:';
+
 export default {
   props: {
     path: {
@@ -45,7 +47,7 @@ export default {
       return this.width && this.height;
     },
     safePath() {
-      return encodeSaferUrl(this.path);
+      return this.path.startsWith(BLOB_PREFIX) ? this.path : encodeSaferUrl(this.path);
     },
   },
   beforeDestroy() {

changelogs/unreleased/325864-fix-image-blob-rendering.yml

+---
+title: Fixed rendering of the image blobs
+merge_request: 57479
+author:
+type: fixed

spec/frontend/__helpers__/test_constants.js

@@ -6,6 +6,8 @@ const DUMMY_IMAGE_URL = `${FIXTURES_PATH}/static/images/one_white_pixel.png`;
 const GREEN_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/green_box.png`;
 const RED_BOX_IMAGE_URL = `${FIXTURES_PATH}/static/images/red_box.png`;
 
+const DUMMY_IMAGE_BLOB_PATH = 'SpongeBlob.png';
+
 // NOTE: module.exports is needed so that this file can be used
 // by environment.js
 //
@@ -16,4 +18,5 @@ module.exports = {
   DUMMY_IMAGE_URL,
   GREEN_BOX_IMAGE_URL,
   RED_BOX_IMAGE_URL,
+  DUMMY_IMAGE_BLOB_PATH,
 };

spec/frontend/vue_shared/components/content_viewer/viewers/image_viewer_spec.js

-import { mount } from '@vue/test-utils';
-import { GREEN_BOX_IMAGE_URL } from 'spec/test_constants';
+import { shallowMount } from '@vue/test-utils';
+import { GREEN_BOX_IMAGE_URL, DUMMY_IMAGE_BLOB_PATH } from 'spec/test_constants';
 import ImageViewer from '~/vue_shared/components/content_viewer/viewers/image_viewer.vue';
 
 describe('Image Viewer', () => {
   let wrapper;
 
   it('renders image preview', () => {
-    wrapper = mount(ImageViewer, {
+    wrapper = shallowMount(ImageViewer, {
       propsData: { path: GREEN_BOX_IMAGE_URL, fileSize: 1024 },
     });
 
@@ -22,7 +22,7 @@ describe('Image Viewer', () => {
     `(
       'shows file size as "$humanizedFileSize", if fileSize=$fileSize and renderInfo=$renderInfo',
       ({ fileSize, renderInfo, elementExists, humanizedFileSize }) => {
-        wrapper = mount(ImageViewer, {
+        wrapper = shallowMount(ImageViewer, {
           propsData: { path: GREEN_BOX_IMAGE_URL, fileSize, renderInfo },
         });
 
@@ -36,11 +36,19 @@ describe('Image Viewer', () => {
 
   describe('file path', () => {
     it('should output a valid URL path for the image', () => {
-      wrapper = mount(ImageViewer, {
+      wrapper = shallowMount(ImageViewer, {
         propsData: { path: '/url/hello#1.jpg' },
       });
 
       expect(wrapper.find('img').attributes('src')).toBe('/url/hello%231.jpg');
     });
+    it('outputs path without transformations when outputting a Blob', () => {
+      const file = new File([], DUMMY_IMAGE_BLOB_PATH);
+      const path = window.URL.createObjectURL(file);
+      wrapper = shallowMount(ImageViewer, {
+        propsData: { path },
+      });
+      expect(wrapper.find('img').attributes('src')).toBe(path);
+    });
   });
 });