From 87c76b3db4477a3fa781548fd7e9d16ec20d078b Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Thu, 16 May 2024 11:58:57 +0200
Subject: [PATCH] MOBILE-4470 viewer: Fix viewing data images

---
 src/core/features/viewer/components/image/image.html |  4 ++++
 src/core/features/viewer/components/image/image.ts   | 11 ++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/core/features/viewer/components/image/image.html b/src/core/features/viewer/components/image/image.html
index 74946e401..d25fdff4a 100644
--- a/src/core/features/viewer/components/image/image.html
+++ b/src/core/features/viewer/components/image/image.html
@@ -2,7 +2,11 @@
     <swiper-container #swiperRef>
         <swiper-slide>
             <div class="swiper-zoom-container">
+                @if (dataUrl) {
+                <img [src]="dataUrl" [alt]="title">
+                } @else {
                 <img [url]="image" [alt]="title" core-external-content [component]="component" [componentId]="componentId">
+                }
             </div>
         </swiper-slide>
     </swiper-container>
diff --git a/src/core/features/viewer/components/image/image.ts b/src/core/features/viewer/components/image/image.ts
index f52e9ab52..87deee8c7 100644
--- a/src/core/features/viewer/components/image/image.ts
+++ b/src/core/features/viewer/components/image/image.ts
@@ -13,11 +13,12 @@
 // limitations under the License.
 
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ModalController, Translate } from '@singletons';
+import { DomSanitizer, ModalController, Translate } from '@singletons';
 import { CoreMath } from '@singletons/math';
 import { Swiper } from 'swiper';
 import { SwiperOptions } from 'swiper/types';
 import { CoreSwiper } from '@singletons/swiper';
+import { SafeResourceUrl } from '@angular/platform-browser';
 
 /**
  * Modal component to view an image.
@@ -52,6 +53,8 @@ export class CoreViewerImageComponent implements OnInit {
     @Input() component?: string; // Component to use in external-content.
     @Input() componentId?: string | number; // Component ID to use in external-content.
 
+    dataUrl?: SafeResourceUrl;
+
     private static readonly MAX_RATIO = 8;
     private static readonly MIN_RATIO = 0.5;
 
@@ -72,6 +75,12 @@ export class CoreViewerImageComponent implements OnInit {
      */
     ngOnInit(): void {
         this.title = this.title || Translate.instant('core.imageviewer');
+
+        if (this.image.startsWith('data:')) {
+            // It's a data image, sanitize it so it can be rendered.
+            // Don't sanitize other images because they load fine and they need to be treated by core-external-content.
+            this.dataUrl = DomSanitizer.bypassSecurityTrustResourceUrl(this.image);
+        }
     }
 
     /**