Skip to content

Commit e03735c

Browse files
committed
chore: update readme
1 parent f31ca6f commit e03735c

File tree

1 file changed

+26
-1
lines changed

1 file changed

+26
-1
lines changed

README.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,11 +171,19 @@ where `anotherLoader` will be used instead of the Uploadcare loader for this par
171171

172172
### `placeholder` and `blurDataURL`
173173

174+
[Read Next.js Image Component docs](https://nextjs.org/docs/api-reference/next/image#placeholder) about `placeholder` and `blurDataURL`.
175+
176+
There are two possible use cases:
177+
178+
1. [When `src` is a string][when-src-is-a-string]
179+
2. [When `src` is a static import][when-src-is-a-static-import]
180+
181+
#### When `src` is a string
182+
174183
This options is available for the `UploadcareImage` component only. It won't work when you're using custom loader directly.
175184

176185
If you pass `placeholder="blur"` to the `UploadcareImage` component, it will generate `blurDataURL` with the URL of the placeholder image (not base64) and use it as a placeholder. You can override `blurDataURL`.
177186

178-
[Read more](https://nextjs.org/docs/api-reference/next/image#placeholder) about `placeholder` and `blurDataURL`.
179187

180188
```tsx
181189

@@ -190,6 +198,23 @@ If you pass `placeholder="blur"` to the `UploadcareImage` component, it will gen
190198
/>
191199
```
192200

201+
#### When `src` is a static import
202+
203+
You can use both `UploadcareImage` and `Image` component with custom loader. In this case Next.js will generate base64 encoded image for `blurDataURL` automatically during build time.
204+
205+
```jsx
206+
import staticImage from 'image.jpg'
207+
208+
<UploadcareImage
209+
alt="A test image"
210+
src={staticImage}
211+
width="400"
212+
height="300"
213+
quality="80"
214+
placeholder="blur"
215+
/>
216+
```
217+
193218
## Notes
194219

195220
- If you have jpegs larger than 3000px and you want loader to resize them up to 5000px, you need to pass filename with `jpeg` or `jpg` extension to the src url. See [Output image dimensions docs](https://uploadcare.com/docs/transformations/image/#dimensions) for more details. When no filename provided, we'll treat the image as non-jpeg and can resize it up to 3000px only.

0 commit comments

Comments
 (0)