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.
|