This package exists to aid with implementing the Contensis Image API in a React project.
<CImage source="{`PathToContensisHostedImage`}" altText="Example Image" />
<CImage source="{`PathToContensisHostedImage`}">
{Children}
</CImage>
Prop | Type | Description | Example |
---|---|---|---|
source |
string | Path to Contensis hosted image | '/image-library/example.jpg' |
altText |
string | Alt text to appear on image when using element | 'This an example image' |
resolution |
array | Screen resolution densities to support, as multiples of 72 | [1, 2] |
className |
string | Class to apply to element | N/A |
width |
number | Pixel width to request image at from the API | 200 |
height |
number | Pixel height to request image at from the API | 200 |
fit |
string | Fit type of image resize | 'contain' |
background |
string | ||
rotation |
number | Degrees to rotate the image by. [0 - 360] | 90 |
quality |
number | Visual quality to request image at. [1-100] | 75 |
crop |
string | Crop size and location. Can be coordinates in [w,h,x,y] or use shorthand [tl, t, tr, l, c, r, bl, b, br] | '200,200,50,100' |
flip |
string | Flip image on its axis. [vertical, v, hotizontal, h, both, b]. | v |
effect |
string | Apply an effect to the image | 'grayscale' |
blur |
number | Level of blur to apply to the image. [0 - 100]. | 20 |
format |
string | Image format to request image back as. | 'webp' |