fix(webui): better image loading for cards

only display the placeholder in case of error
don't display the placeholder for the thumbnails explorer

komga-webui/src/components/ItemCard.vue

@@ -10,7 +10,7 @@
         <!--      Thumbnail-->
         <v-img
           :src="thumbnailUrl"
-          lazy-src="../assets/cover.svg"
+          :lazy-src="thumbnailError ? coverBase64 : undefined"
           aspect-ratio="0.7071"
           contain
           @error="thumbnailError = true"
@@ -131,6 +131,7 @@ import {BookDto} from '@/types/komga-books'
 import {SeriesDto} from '@/types/komga-series'
 import {THUMBNAILBOOK_ADDED, THUMBNAILSERIES_ADDED} from '@/types/events'
 import {ThumbnailBookSseDto, ThumbnailSeriesSseDto} from '@/types/komga-sse'
+import {coverBase64} from '@/types/image'
 
 export default Vue.extend({
   name: 'ItemCard',
@@ -189,6 +190,7 @@ export default Vue.extend({
       actionMenuState: false,
       thumbnailError: false,
       thumbnailCacheBust: '',
+      coverBase64,
     }
   },
   created() {

komga-webui/src/components/dialogs/ThumbnailExplorerDialog.vue

@@ -21,11 +21,10 @@
             >
               <v-img
                 :src="url"
-                lazy-src="../../assets/cover.svg"
                 aspect-ratio="0.7071"
-                :contain="true"
-                max-height="200"
-                max-width="140"
+                contain
+                height="200"
+                width="140"
                 class="ma-2"
                 @click="input = false; goTo(((page - 1 ) * perPage + i + 1))"
                 style="cursor: pointer"
@@ -42,7 +41,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { bookPageThumbnailUrl } from '@/functions/urls'
+import {bookPageThumbnailUrl} from '@/functions/urls'
 
 export default Vue.extend({
   name: 'ThumbnailExplorerDialog',