61 lines
2.0 KiB
Markdown
61 lines
2.0 KiB
Markdown
# @unpic/react Provider
|
||
|
||
`@unpic/react` интегрируется через base component и custom transformer из `@image-platform/client`.
|
||
|
||
## Remote source mode
|
||
|
||
Remote source mode принимает обычный image `src` из проекта или внешний URL и генерирует responsive `srcset` через Gateway:
|
||
|
||
```text
|
||
GET /p/{project}/remote/{preset}?src={sourceUrl}&w={width}&q={quality}&f=auto
|
||
```
|
||
|
||
## Usage
|
||
|
||
```tsx
|
||
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.
|
||
|
||
```tsx
|
||
<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.
|