react-pdfComponentsImage
Image
A React component for displaying network or local (Node only) JPG or PNG images, as well as base64 encoded image strings.
import { Image } from '@react-pdf/renderer';
const Logo = () => (
<Image
src="https://react-pdf.org/images/luke.jpg"
style={{ width: 120, height: 120 }}
/>
);Show previewHide preview
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| src | Source of the image. See more | Source object | undefined |
| source | Alias of src. See more | Source object | undefined |
| style | Defines view styles. See more | Object, Array | undefined |
| debug | Enables debug mode on view bounding box. See more | Boolean | false |
| fixed | Renders component in all wrapped pages. See more | Boolean | false |
| break | Forces the wrapping algorithm to start a new page when rendering this element. See more | Boolean | false |
| minPresenceAhead | Hint that no page wrapping should occur between all sibling elements following the element within n points. See more | Number | 0 |
| cache | Enables image caching between consecutive renders | Boolean | true |
| srcSet | Responsive image sources for resolution-based selection. E.g. "small.jpg 300w, medium.jpg 600w" | String | undefined |
| sizes | Display width used for srcSet source selection | String, Number | undefined |
| bookmark | Attach bookmark to element. See more | String or Bookmark | undefined |
Source object
Defines the source of an image. Can be in any of these four valid forms:
| Form type | Description | Example |
|---|---|---|
| String | Valid image URL or filesystem path (Node only) | www.react-pdf.org/test.jpg |
| URL object | Enables to pass extra parameters on how to fetch images | { uri: valid-url, method: 'GET', headers: {}, body: '', credentials: 'include' } |
| Buffer | Renders image directly from Buffer. Image format (png or jpg) will be guessed based on Buffer. | Buffer |
| Data buffer | Renders buffer image via the data key. It's also recommended to provide the image format so the engine knows how to proccess it | { data: Buffer, format: 'png' | 'jpg' } |
| Function | A function that returns (can also return a promise that resolves to) any of the above formats | () => String | Promise<String> |