render opened image;

frontend/src/app/component/images/images.component.html

@@ -6,7 +6,10 @@
   <span style="width: 22.5em; display: inline-block">File valid</span>
 </div>
 
-<mat-expansion-panel *ngFor="let image of images | slice:paginationGetStart():paginationGetEnd(); let i = index">
+<mat-expansion-panel
+  *ngFor="let image of images | slice:paginationGetStart():paginationGetEnd(); let i = index"
+  (opened)="loadImage(i, image.filename.split('.')[0])"
+>
   <mat-expansion-panel-header (click)="$event.stopPropagation()">
     <span style="width: 30em"
     >{{image.name}}</span>
@@ -17,18 +20,25 @@
     </span>
   </mat-expansion-panel-header>
 
-  <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em">
-    IMAGE
-  </div>
+  <ng-template matExpansionPanelContent>
+    <div style="width: 20em; height: 20em; border: solid; margin-bottom: 1em; display: flex">
+      <img *ngIf="image.image_b64, let b64; else loadingImage"
+           [src]="b64"
+           style="width: 100%; margin: auto"  [alt]="image.filename"/>
+      <ng-template #loadingImage>
+        <mat-spinner style="margin: auto;"></mat-spinner>
+      </ng-template>
 
-  <angular-file-uploader style="margin-left: 0 !important;"
-                         [config]="getImageUpdateConfig(image.filename)"
+    </div>
 
-  >
-  </angular-file-uploader>
-  <span style="float: right">
-    <button mat-raised-button color="warn" (click)="deleteImage(image)">Delete</button>
-  </span>
+    <angular-file-uploader style="margin-left: 0 !important;"
+                           [config]="getImageUpdateConfig(image.filename)">
+    </angular-file-uploader>
+
+    <span style="float: right">
+      <button mat-raised-button color="warn" (click)="deleteImage(image)">Delete</button>
+    </span>
+  </ng-template>
 </mat-expansion-panel>
 
 <mat-paginator [length]="images.length"