diff --git a/src/components/CoverImage.tsx b/src/components/CoverImage.tsx index 4a29a21..cb94273 100644 --- a/src/components/CoverImage.tsx +++ b/src/components/CoverImage.tsx @@ -31,6 +31,9 @@ interface Props { src: string; } +const emptyAlbumLight = require('@/assets/images/empty-album-light.png'); +const emptyAlbumDark = require('@/assets/images/empty-album-dark.png'); + /** * This will take a cover image, and apply shadows and a really nice background * blur to the image in question. Additionally, we'll add some margin and radius @@ -47,19 +50,14 @@ function CoverImage({ const defaultStyles = useDefaultStyles(); const colorScheme = useUserOrSystemScheme(); - const image = useImage(src || null); - const fallback = useImage(colorScheme === 'light' - ? require('@/assets/images/empty-album-light.png') - : require('@/assets/images/empty-album-dark.png') - ); + const image = useImage(src || null, console.log); + const fallback = useImage(colorScheme === 'light' ? emptyAlbumLight: emptyAlbumDark); const { canvasSize, imageSize } = useMemo(() => { const imageSize = Screen.width - margin; const canvasSize = imageSize + blurRadius * 2; return { imageSize, canvasSize }; }, [blurRadius, margin]); - const skiaImage = useMemo(() => (image || fallback), [image, fallback]); - return ( @@ -70,14 +68,30 @@ function CoverImage({ - {skiaImage ? ( + {image ? ( <> - + - }> - + + } + key={image ? 'image' : 'fallback'} + > +