diff --git a/resources/js/components/gallery/thumbs/AlbumThumbImage.vue b/resources/js/components/gallery/thumbs/AlbumThumbImage.vue index 07fd4744415..744a24cb192 100644 --- a/resources/js/components/gallery/thumbs/AlbumThumbImage.vue +++ b/resources/js/components/gallery/thumbs/AlbumThumbImage.vue @@ -53,7 +53,7 @@ function onImageLoad() { function load(thumb: App.Http.Resources.Models.ThumbResource | undefined | null, isPasswordProtected: boolean) { if (isNotEmpty(thumb?.placeholder)) { - placeholderSrc.value = thumb?.placeholder as string; + placeholderSrc.value = thumb.placeholder; } if (thumb?.thumb === "uploads/thumb/") { src.value = getPlaceholderIcon(); @@ -64,9 +64,9 @@ function load(thumb: App.Http.Resources.Models.ThumbResource | undefined | null, src.value = getNoImageIcon(); } } else { - src.value = isNotEmpty(thumb?.thumb) ? (thumb?.thumb as string) : isPasswordProtected ? getPaswwordIcon() : getNoImageIcon(); + src.value = isNotEmpty(thumb?.thumb) ? thumb.thumb : isPasswordProtected ? getPaswwordIcon() : getNoImageIcon(); } - srcSet.value = isNotEmpty(thumb?.thumb2x) ? (thumb?.thumb2x as string) : ""; + srcSet.value = isNotEmpty(thumb?.thumb2x) ? thumb.thumb2x : ""; } load(props.thumb, props.isPasswordProtected); diff --git a/resources/js/composables/photo/basePhoto.ts b/resources/js/composables/photo/basePhoto.ts index 21b2575af9a..094852d4892 100644 --- a/resources/js/composables/photo/basePhoto.ts +++ b/resources/js/composables/photo/basePhoto.ts @@ -1,4 +1,3 @@ -import Constants from "@/services/constants"; import { computed, Ref, ref } from "vue"; export function usePhotoBaseFunction(photoId: Ref) { @@ -6,8 +5,6 @@ export function usePhotoBaseFunction(photoId: Ref) { const album = ref(null) as Ref; const photos = ref([]) as Ref; - const placeholder = Constants.BASE_URL + "/img/placeholder.png"; - function hasPrevious(): boolean { return photo.value?.previous_photo_id !== null; } @@ -96,7 +93,6 @@ export function usePhotoBaseFunction(photoId: Ref) { photo, album, photos, - placeholder, previousStyle, nextStyle, srcSetMedium, diff --git a/resources/js/utils/Helpers.ts b/resources/js/utils/Helpers.ts index 5bc95506ac0..300e682e3c1 100644 --- a/resources/js/utils/Helpers.ts +++ b/resources/js/utils/Helpers.ts @@ -1,7 +1,7 @@ import Constants from "@/services/constants"; export function useImageHelpers() { - function isNotEmpty(link: string | null | undefined): boolean { + function isNotEmpty(link: string | null | undefined): link is string { return link !== "" && link !== null && link !== undefined; } diff --git a/resources/js/views/gallery-panels/Photo.vue b/resources/js/views/gallery-panels/Photo.vue index eb7a1d5f72d..ad44ed38246 100644 --- a/resources/js/views/gallery-panels/Photo.vue +++ b/resources/js/views/gallery-panels/Photo.vue @@ -34,7 +34,7 @@ id="image" alt="placeholder" class="absolute m-auto w-auto h-auto animate-zoomIn bg-contain bg-center bg-no-repeat" - :src="placeholder" + :src="getPlaceholderIcon()" /> (null); @@ -183,8 +184,9 @@ const { is_upload_visible } = storeToRefs(lycheeStore); const { isDeleteVisible, toggleDelete, isMoveVisible, toggleMove } = useGalleryModals(is_upload_visible); const photoId = ref(props.photoid); -const { photo, album, photos, placeholder, previousStyle, nextStyle, srcSetMedium, style, imageViewMode, refresh, hasPrevious, hasNext } = +const { photo, album, photos, previousStyle, nextStyle, srcSetMedium, style, imageViewMode, refresh, hasPrevious, hasNext } = usePhotoBaseFunction(photoId); +const { getPlaceholderIcon } = useImageHelpers(); const { is_full_screen, is_edit_open, are_details_open, is_slideshow_active, slideshow_timeout } = storeToRefs(lycheeStore);