MOBILE-4470 viewer: Fix viewing data images

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>

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);
+        }
     }
 
     /**