Using optimized image directive of angular (#17)

Co-authored-by: Marco Egli <marco_egli@hotmail.com>
iptch · Feb 23, 2024 · 697ad19 · 697ad19
1 parent da39e77
commit 697ad19
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { registerLocaleData } from '@angular/common';
+import { NgOptimizedImage, registerLocaleData } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import localeDeCh from '@angular/common/locales/de-CH';
 import { LOCALE_ID, NgModule, isDevMode } from '@angular/core';
@@ -187,6 +187,7 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     MatButtonModule,
     MatInputModule,
     MatProgressBarModule,
+    NgOptimizedImage,
   ],
   providers: [
     {

diff --git a/src/app/components/card-thumbnail/card-thumbnail.component.html b/src/app/components/card-thumbnail/card-thumbnail.component.html
@@ -1,6 +1,8 @@
 <div class="relative">
   <img
-    [src]="card.image_url"
+    [ngSrc]="card.image_url"
+    [height]="400"
+    [width]="400"
     alt="{{ card.name }}"
     class="w-full aspect-square object-cover"
     [class.grayscale]="!card.quantity"