Move around BLOB

src/MistoxWebsite.Client/src/app/models/Product.ts

@@ -11,5 +11,5 @@ export class Product {
 export class ProductImage {
   imageID: number = 0;
   productID: number = 0;
-  imageSrc: string = "";
+  imageSrc: Blob = new Blob;
 }

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html

@@ -6,7 +6,7 @@
                 <button class="gameCard-Next" onclick="">❯</button>
             </div>
             <div *ngIf="product.images.length > 0" >
-                <img class="gameCard-Img" [src]="product.images[product.curShowingIMG].imageSrc">
+                <img class="gameCard-Img" [src]="createImageUrl(product.images[product.curShowingIMG].imageSrc)">
             </div>
         </div>
         <h1 class ="gameCard-Name">{{ product.name }}</h1>

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.ts

@@ -29,7 +29,7 @@ export class CatalogComponent {
         this.Products.forEach(item => {
           item.images.forEach(img => {
             http.get("https://mistox.com/api/productimage/get?ProductID=" + img.productID + "&ImageID=" + img.imageID, { responseType: 'blob' }).subscribe(blob => {
-              img.imageSrc = URL.createObjectURL(blob);
+              img.imageSrc = blob;
             });
           });
         });
@@ -37,4 +37,8 @@ export class CatalogComponent {
       }
     )
   };
+
+  createImageUrl(blob: Blob): string {
+    return URL.createObjectURL(blob);
+  }
 }