Image component not rendering on mobile first load in checkout extension

Extensions
1 
          <View maxInlineSize={46} display={'block'}>
            {/* 4px vertical spacing, pushing down */}
            <BlockLayout rows={[4, 'auto']}>
              <BlockSpacer />
              <Image
                fit={'contain'}
                source={EXTERNAL_ASSET}
              />
            </BlockLayout>
          </View>
  • Behavior: “Works on desktop, fails on mobile first load, works on mobile refresh”
  • Browsers tested: Safari iOS, Chrome Android, etc.
  • Extension type: “purchase.checkout.block.render”
  • External image URL: Mention you’re using an external asset
1 Like
2

Hi Hannah,

Thanks for reaching out about the image component in Checkout UI Extensions!

I’ve tested your code using a placeholder image and a larger maxInlineSize in my app.

 <View maxInlineSize={246} display={'block'}>
        <BlockLayout rows={[4, 'auto']}>
          <BlockSpacer />
          <Image
            fit={'contain'}
            source={'https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-image_large.png'}
          />
        </BlockLayout>
      </View>
  );

I wasn’t able to replicate the issue you’re encountering. Can you please share more information about the browser versions you’re testing with and your extension’s API version?

Thanks :slight_smile:

3

Are you still seeing this issue @hannahtrask or can we mark this as resolved?

1 Like