@@ -25,22 +25,23 @@ CldImage extends the Upnic Image component using Cloudinary tech. This means all
2525
2626The CldImage component exposes many of Cloudinary's transformations in an easy-to-use way right inside of Nuxt.
2727
28- | Prop | Type | Default | Example | More |
29- | --------------------- | ----------------------- | --------- | ----------------------- | ------------------------------------------------------------------------------------------ |
30- | angle | number | ` - ` | ` "45" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#a_angle?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
31- | background | string | ` - ` | ` "blue" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#b_background?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
32- | crop | string | ` "limit" ` | ` "thumb" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#c_crop_resize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
33- | enhance | boolean | ` - ` | ` "true" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_enhance?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
34- | fillBackground (Beta) | ` boolean/object ` | ` - ` | ` {{ gravity: 'east' }} ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#b_gen_fill?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
35- | gravity | string | ` auto ` | ` "faces" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#g_gravity?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
36- | loop | ` boolean/number ` | ` - ` | ` true ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_loop?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
37- | recolor | ` array/object ` | ` - ` | ` ['duck', 'blue'] ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_recolor?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
38- | remove | ` string/array/object ` | ` - ` | ` apple ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_remove?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
39- | removeBackground | ` boolean/string ` | ` false ` | ` true ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_background_removal?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
40- | replace | ` array/object ` | ` - ` | ` ['apple', 'banana'] ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
41- | restore | boolean | ` - ` | ` true ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_restore?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
42- | zoom | string | ` - ` | ` 0.5 ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#z_zoom?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
43- | zoompan | ` boolean/string/object ` | ` - ` | ` true ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_zoompan?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
28+ | Prop | Type | Default | Example | More |
29+ | --------------------- | ----------------------- | --------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
30+ | angle | number | ` - ` | ` "45" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#a_angle?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
31+ | background | string | ` - ` | ` "blue" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#b_background?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
32+ | crop | string | ` "limit" ` | ` "thumb" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#c_crop_resize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
33+ | enhance | boolean | ` - ` | ` "true" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_enhance?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
34+ | fillBackground (Beta) | ` boolean/object ` | ` - ` | ` {{ gravity: 'east' }} ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#b_gen_fill?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
35+ | gravity | string | ` auto ` | ` "faces" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#g_gravity?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
36+ | loop | ` boolean/number ` | ` - ` | ` true ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_loop?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
37+ | recolor | ` array/object ` | ` - ` | ` ['duck', 'blue'] ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_recolor?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
38+ | remove | ` string/array/object ` | ` - ` | ` apple ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_remove?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
39+ | removeBackground | ` boolean/string ` | ` false ` | ` true ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_background_removal?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
40+ | replace | ` array/object ` | ` - ` | ` ['apple', 'banana'] ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
41+ | restore | boolean | ` - ` | ` true ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_restore?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
42+ | replaceBackground | ` boolean/string/object ` | ` - ` | ` true/'fish tank'/{ prompt: 'fish tank', seed: 3 } ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_gen_background_replace?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
43+ | zoom | string | ` - ` | ` 0.5 ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#z_zoom?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
44+ | zoompan | ` boolean/string/object ` | ` - ` | ` true ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_zoompan?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
4445
4546## General Props
4647
@@ -76,8 +77,8 @@ Following props can be passed to the CldImage component to make it work in more
7677
7778All effect props are disabled by default.
7879
79- | Prop Name | Type | Example | More |
80- | ------------------ | ------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------- |
80+ | Prop Name | Type | Example | More |
81+ | ------------------ | ------------- | ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
8182| art | string | ` "al_dente" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_art?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
8283| autoBrightness | bool/string | ` true ` , ` "80" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_auto_brightness?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
8384| autoColor | bool/string | ` true ` , ` "80" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_auto_color?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
@@ -87,11 +88,11 @@ All effect props are disabled by default.
8788| blur | bool/string | ` true ` , ` "800" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_blur?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
8889| blurFaces | bool/string | ` true ` , ` "800" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_blur_faces?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
8990| blurRegion | bool/string | ` true ` , ` "1000,h_425,w_550,x_600,y_400" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_blur_region?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
90- | border | string | ` "5px_solid_purple" ` | ` - ` |
91+ | border | string | ` "5px_solid_purple" ` | ` - ` |
9192| brightness | bool/string | ` true ` , ` "100" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_brightness?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
9293| brightnessHSB | bool/string | ` true ` , ` "100" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_brightness_hsb?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
9394| cartoonify | bool/string | ` true ` , ` "70:80" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_cartoonify?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
94- | color | string | ` "blue" ` | ` - ` |
95+ | color | string | ` "blue" ` | ` - ` |
9596| colorize | string | ` "35,co_darkviolet" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_colorize?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
9697| contrast | bool/string | ` true ` , ` "100" ` , ` "level_-70" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_contrast?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
9798| distort | string | ` "150:340:1500:10:1500:1550:50:1000" ` , ` "arc:180.0" ` | [ Link] ( https://cloudinary.com/documentation/transformation_reference#e_distort?utm_campaign=devx_nuxtcloudinary&utm_medium=referral&utm_source=nuxtcloudinary ) |
0 commit comments