Inconsistent placeholder in Image/ImageGroup

Extensions
1

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

Screenshot 2025-05-16 at 15.06.53
Screenshot 2025-05-16 at 15.06.53667×637 19.2 KB

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

Screenshot 2025-05-16 at 15.08.49
Screenshot 2025-05-16 at 15.08.49667×335 7.01 KB

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>