Images Not Being Rendered In Checkout Extensions

Extensions
1

I am simply trying to display an image on checkout through creating a new extension, but the image is not being rendered and is being converted to a GIF. I even used the Image component but the issue still persists

image
image2520×290 39.3 KB

image
image2210×1020 111 KB

image
image1858×244 40.6 KB

image
image960×470 74 KB

1 Like
2

Can anyone help? It’s really important

3

@Liam-Shopify @Paige-Shopify

4

Please have some patience, for some timezones, you posted during the middle of the night.

Also, please do not tag Shopify staff.

1 Like
5

@Luke Thank you I will keep it in my mind for future references

6

Any help here would be greatly appreciated!

7

Hi there,

I used your code on my app, and it appears to render fine:

05-34-7lewt-2vhe9
05-34-7lewt-2vhe91664×1824 330 KB

For reference, this is what I have:

import '@shopify/ui-extensions/preact';
import {render} from "preact";

export default async () => {
  render(<Extension />, document.body)
};

function Extension() {

  return (
    <s-image
    objectFit="contain"
    alt="Checkout Image"
    aspectRatio="16/9"
    loading="eager"
    src='https://shopify-staged-uploads.storage.googleapis.com/tmp/96511492398/files/5cc44281-0dac-4613-b8f9-8b09a0001524/image-component.webp'
    borderRadius="base"
    />
  );
}

What does your shopify.extension.toml file look like? Does it read similar to this?

api_version = "2025-10"

[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"

Can you share the content of the package.json file for your extension?