Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Api image fix (#6034)

Browse Source 
* Replace invalid image with skeleton

* Simplify ApiImage

* Flag unused variable
This commit is contained in:
Oliver 2023-12-05 23:20:41 +11:00 committed by GitHub
parent 8605832693
commit 22800d6b10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/frontend/src/components/images/ApiImage.tsx
View File

@ -4,13 +4,7 @@
*
* Image caching is handled automagically by the browsers cache
*/
import {
Image,
ImageProps,
LoadingOverlay,
Overlay,
Stack
} from '@mantine/core';
import { Image, ImageProps, Skeleton, Stack } from '@mantine/core';
import { useId } from '@mantine/hooks';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
@ -27,7 +21,7 @@ export function ApiImage(props: ImageProps) {
const queryKey = useId();
const imgQuery = useQuery({
const _imgQuery = useQuery({
queryKey: ['image', queryKey, props.src],
enabled:
authorized &&
@ -52,7 +46,8 @@ export function ApiImage(props: ImageProps) {
setImage(url);
break;
default:
// User is not authorized to view this image
// User is not authorized to view this image, or the image is not available
setImage('');
setAuthorized(false);
console.error(`Error fetching image ${props.src}:`, response);
break;
@ -71,9 +66,14 @@ export function ApiImage(props: ImageProps) {
return (
<Stack>
<LoadingOverlay visible={imgQuery.isLoading || imgQuery.isFetching} />
<Image {...props} src={image} withPlaceholder fit="contain" />
{imgQuery.isError && <Overlay color="#F00" />}
{image && image.length > 0 ? (
<Image {...props} src={image} withPlaceholder fit="contain" />
) : (
<Skeleton
height={props?.height ?? props.width}
width={props?.width ?? props.height}
/>
)}
</Stack>
);
}