Merge branch '35577-fix-image-blob-display-due-to-lazy-image-loading' into 'master'

Resolve "Fix Image Blob Display due to lazy Image Loading"

Closes #35577

See merge request !13104

3 files changed, 11 insertions, 10 deletions

diff --git a/app/views/projects/blob/viewers/_image.html.haml b/app/views/projects/blob/viewers/_image.html.haml
index 1650aa8197f..5fd22a59217 100644
--- a/app/views/projects/blob/viewers/_image.html.haml
+++ b/app/views/projects/blob/viewers/_image.html.haml
@@ -1,2 +1,2 @@
 .file-content.image_file
-  %img{ 'data-src': blob_raw_url, alt: viewer.blob.name }
+  = image_tag(blob_raw_url, alt: viewer.blob.name)
diff --git a/app/views/projects/diffs/viewers/_image.html.haml b/app/views/projects/diffs/viewers/_image.html.haml
index 05877ceed3d..aa004a739d7 100644
--- a/app/views/projects/diffs/viewers/_image.html.haml
+++ b/app/views/projects/diffs/viewers/_image.html.haml
@@ -8,7 +8,7 @@
   .image
     %span.wrap
       .frame{ class: (diff_file.deleted_file? ? 'deleted' : 'added') }
-        %img{ 'data-src': blob_raw_path, alt: diff_file.file_path }
+        = image_tag(blob_raw_path, alt: diff_file.file_path)
       %p.image-info= number_to_human_size(blob.size)
 - else
   .image
@@ -16,7 +16,7 @@
       %span.wrap
         .frame.deleted
           %a{ href: project_blob_path(@project, tree_join(diff_file.old_content_sha, diff_file.old_path)) }
-            %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path }
+            = image_tag(old_blob_raw_path, alt: diff_file.old_path)
         %p.image-info.hide
           %span.meta-filesize= number_to_human_size(old_blob.size)
           |
@@ -28,7 +28,7 @@
       %span.wrap
         .frame.added
           %a{ href: project_blob_path(@project, tree_join(diff_file.content_sha, diff_file.new_path)) }
-            %img{ 'data-src': blob_raw_path, alt: diff_file.new_path }
+            = image_tag(blob_raw_path, alt: diff_file.new_path)
         %p.image-info.hide
           %span.meta-filesize= number_to_human_size(blob.size)
           |
@@ -41,10 +41,10 @@
     .swipe.view.hide
       .swipe-frame
         .frame.deleted
-          %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path }
+          = image_tag(old_blob_raw_path, alt: diff_file.old_path)
         .swipe-wrap
           .frame.added
-            %img{ 'data-src': blob_raw_path, alt: diff_file.new_path }
+            = image_tag(blob_raw_path, alt: diff_file.new_path)
         %span.swipe-bar
           %span.top-handle
           %span.bottom-handle
@@ -52,9 +52,9 @@
     .onion-skin.view.hide
       .onion-skin-frame
         .frame.deleted
-          %img{ 'data-src': old_blob_raw_path, alt: diff_file.old_path }
+          = image_tag(old_blob_raw_path, alt: diff_file.old_path)
         .frame.added
-          %img{ 'data-src': blob_raw_path, alt: diff_file.new_path }
+          = image_tag(blob_raw_path, alt: diff_file.new_path)
         .controls
           .transparent
           .drag-track
diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md
index f25313d6cff..14ac1133cc0 100644
--- a/doc/development/fe_guide/performance.md
+++ b/doc/development/fe_guide/performance.md
@@ -29,11 +29,12 @@ To improve the time to first render we are using lazy loading for images. This w
 the actual image source on the `data-src` attribute. After the HTML is rendered and JavaScript is loaded, 
 the value of `data-src` will be moved to `src` automatically if the image is in the current viewport.
 
-*  Prepare images in HTML for lazy loading by renaming the `src` attribute to `data-src`
+*  Prepare images in HTML for lazy loading by renaming the `src` attribute to `data-src` AND adding the class `lazy`
 *  If you are using the Rails `image_tag` helper, all images will be lazy-loaded by default unless `lazy: false` is provided.
 
 If you are asynchronously adding content which contains lazy images then you need to call the function
-`gl.lazyLoader.searchLazyImages()` which will search for lazy images and load them if needed.
+`gl.lazyLoader.searchLazyImages()` which will search for lazy images and load them if needed. 
+But in general it should be handled automatically through a `MutationObserver` in the lazy loading function.
 
 ## Reducing Asset Footprint