fix(images): silence 404 on image fetching

Author: dvcol

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -183,6 +183,8 @@ const placement = computed(() => {
 </template>
 
 <style lang="scss">
+@use '~/styles/layout' as layout;
+
 .settings-dropdown {
   min-width: max(calc(100vw / var(--tab-count)), 8rem);
   max-width: 20rem;
@@ -191,7 +193,7 @@ const placement = computed(() => {
   text-align: left;
 
   &.floating {
-    min-width: max(calc(var(--max-header-width) / var(--tab-count)), 8rem);
+    min-width: max(calc(#{layout.$floating-navbar-width} / var(--tab-count)), 8rem);
     margin-right: 0;
   }
 

src/components/common/poster/PosterComponent.vue

@@ -6,6 +6,7 @@ import { computed, onBeforeUnmount, type PropType, ref, toRefs, watch } from 'vu
 import type { PosterItem } from '~/models/poster.model';
 
 import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
+import { Logger } from '~/services/logger.service';
 import { useImageStore } from '~/stores/data/image.store';
 
 const props = defineProps({
@@ -58,7 +59,7 @@ const timeout = ref();
 
 const { getImageUrl } = useImageStore();
 
-const getPosters = (_item: PosterItem) => {
+const getPosters = async (_item: PosterItem) => {
   if (poster?.value) return;
   if (_item.poster) return;
 
@@ -74,7 +75,11 @@ const getPosters = (_item: PosterItem) => {
     if (imgLoaded.value) return;
     transition.value = true;
   }, 100);
-  getImageUrl(query, size.value, _item.posterRef ?? localPoster);
+  try {
+    await getImageUrl(query, size.value, _item.posterRef ?? localPoster);
+  } catch (error) {
+    Logger.error('Failed to fetch poster', error);
+  }
 };
 
 watch(item, getPosters, { immediate: true, flush: 'post' });

src/stores/data/image.store.ts

@@ -149,6 +149,10 @@ export const useImageStore = defineStore(ImageStoreConstants.Store, () => {
       delete imageErrors[type]?.[key];
       return response;
     } catch (error) {
+      if (error instanceof Response && error.status === 404) {
+        Logger.warn('No image found', { key, type });
+        return {};
+      }
       Logger.error('Failed to queue image request', { key, type });
       if (!imageErrors[type]) imageErrors[type] = {};
       imageErrors[type]![key] = ErrorCount.fromDictionary(imageErrors[type]!, key, error);