image loading is modified

projects/ucap-webmessenger-ui/src/lib/components/image.component.ts

@@ -66,7 +66,7 @@ export class ImageComponent implements OnInit {
   }
 
   baseStyle: SafeStyle;
-  imageSrc: string | ArrayBuffer;
+  imageSrc: string;
   classList: { [key: string]: boolean } = {};
 
   constructor(
@@ -94,22 +94,23 @@ export class ImageComponent implements OnInit {
       this.imageSrc = this.default;
 
       const imageUrl = `${this.base}${this.path}`;
-
+      const image = new Image();
-      this.httpClient
+      image.onload = () => {
-        .get(imageUrl, { responseType: 'blob' })
+        if ('naturalHeight' in this) {
-        .pipe(take(1))
+          if (image.naturalHeight + image.naturalWidth === 0) {
-        .subscribe(
+            image.onerror('naturalHeight');
-          blob => {
+            return;
-            const reader = new FileReader();
-            reader.onloadend = ev => {
-              this.imageSrc = reader.result;
-            };
-            reader.readAsDataURL(blob);
-          },
-          error => {
-            this.imageSrc = this.default;
           }
-        );
+        } else if (image.width + image.height === 0) {
+          image.onerror('width');
+          return;
+        }
+        this.imageSrc = image.src;
+      };
+      image.onerror = () => {
+        this.imageSrc = this.default;
+      };
+      image.src = imageUrl;
     }
   }
 }