When placing an Image
or SkeletonImage
inside an ImageGroup
, it may gracefully fall back to a placeholder. The same is not true when using just Image
or SkeletonImage
itself.
Objective: Image/SkeletonImage
Should also gracefully fall back to a placeholder when providing invalid images, without having to wrap into a ImageGroup
Examples
With ImageGroup
import {
BlockStack,
Heading,
Image,
ImageGroup,
SkeletonImage,
View,
} from '@shopify/ui-extensions-react/customer-account';
<View>
<BlockStack spacing="base">
<View>
<Heading level={2}>ImageGroup + Image with empty source</Heading>
<ImageGroup>
<Image source="" />
</ImageGroup>
</View>
<View>
<Heading level={2}>ImageGroup + Image with x.jpg source</Heading>
<ImageGroup>
<Image source="x.jpg" />
</ImageGroup>
</View>
<View>
<Heading level={2}>ImageGroup + SkeletonImage</Heading>
<ImageGroup>
<SkeletonImage aspectRatio={1} />
</ImageGroup>
</View>
</BlockStack>
</View>
Without ImageGroup
import {
BlockStack,
Heading,
Image,
ImageGroup,
SkeletonImage,
View,
} from '@shopify/ui-extensions-react/customer-account';
<View>
<BlockStack spacing="base">
<View>
<Heading level={2}>Image with empty source</Heading>
<Image source="" />
</View>
<View>
<Heading level={2}>Image with x.jpg source</Heading>
<Image source="x.jpg" />
</View>
<View>
<Heading level={2}>SkeletonImage</Heading>
<SkeletonImage aspectRatio={1} />
</View>
</BlockStack>
</View>