Image

interface Image {
  id: string;
  url: string;
  altText: string | null;
  width: number | null;
  height: number | null;
}

<img
  src={product.featuredImage?.url}
  alt={product.featuredImage?.altText || product.title}
  width={product.featuredImage?.width || undefined}
  height={product.featuredImage?.height || undefined}
/>

import { getProductImage } from '@corvex/theme-sdk';

const url = getProductImage(product);
if (url) {
  return <img src={url} alt={product.title} />;
}

// ✅ Preferido
<img src={category.imageUrl || category.image?.url} alt={category.title} />

// ❌ Errado — image é objeto
<img src={category.image} alt={category.title} />

import { Image } from '@corvex/theme-sdk';

<Image src={product.featuredImage?.url} alt={product.title} />

<section style={{ backgroundImage: `url(${settings.imageUrl})` }} />