image-platform/docs/unpic-react-provider.md

@unpic/react Provider

@unpic/react интегрируется через base component и custom transformer из @image-platform/client.

Remote source mode

Remote source mode принимает обычный image src из проекта или внешний URL и генерирует responsive srcset через Gateway:

GET /p/{project}/remote/{preset}?src={sourceUrl}&w={width}&q={quality}&f=auto

Usage

import { Image } from "@unpic/react/base"
import { imagePlatformUnpicTransformer } from "@image-platform/client"

export function ProductImage() {
  return (
    <Image
      alt="Product"
      layout="constrained"
      options={{
        baseUrl: "https://img.example.com",
        preset: "card",
        project: "acme",
        sourceBaseUrl: "https://site.example.com",
      }}
      src="/images/product.jpg"
      transformer={imagePlatformUnpicTransformer}
      width={640}
      height={420}
    />
  )
}

Если src относительный, sourceBaseUrl превращает его в абсолютный source URL. Если src уже абсолютный, он используется без изменений.

Breakpoints

Static presets принимают только разрешённые widths. Для card это 320, 640, 960, поэтому consumer должен передать compatible breakpoints или использовать Next/Unpic config, который не генерирует лишние widths.

<Image
  alt="Product"
  breakpoints={[320, 640, 960]}
  height={420}
  layout="constrained"
  options={{ baseUrl: "https://img.example.com", preset: "card", project: "acme", sourceBaseUrl: "https://site.example.com" }}
  src="/images/product.jpg"
  transformer={imagePlatformUnpicTransformer}
  width={640}
/>

Auth

Image delivery URL публичный и не использует Authorization. Management API tokens нужны только server-side для создания assets, versions и variants.