Image

import { Image } from '@/components/polaris';

function Example() {
    return (
        <Image
            src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-1_large.png"
            alt="Product photo"
            aspectRatio="16/9"
        />
    );
}

import { forwardRef, createElement } from 'react';

type Props = JSX.IntrinsicElements['s-image'];

/**
 * Image component - displays images with aspect ratio control.
 *
 * @example
 * <Image src="/product.jpg" alt="Product photo" aspectRatio="16/9" />
 */
export const Image = forwardRef<HTMLElement, Props>((props, ref) => createElement('s-image', { ref, ...props }));

Image.displayName = 'Image';