Cloudinary

Integration between Cloudinary and the image module.

To use this provider you just need to specify the base url of your project in cloudinary.

export default {  image: {    cloudinary: {      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/'    }  }}

Remote Images

To handle remote image data, you can either use fetch or upload.

Consult the cloudinary documentation for the difference between the two.

Fetch

export default {  image: {    cloudinary: {      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/fetch/'    }  }}

<NuxtImg provider="cloudinary" src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Olympic_flag.jpg" width="300" height="200" />

Note: You will need to configure your "Allowed fetch domains" to do the above.

Upload

export default {  image: {    cloudinary: {      baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/<mapping-folder>'    }  }}

<NuxtImg provider="cloudinary" src="/commons/a/ae/Olympic_flag.jpg" width="300" height="200" />

Note: You will need to configure your "Auto upload mapping" to do the above.

Cloudinary fit values

Beside the standard values for fit property of Nuxt image and Nuxt picture, Cloudinary offers the following for extra resizing experience:

• minCover - Same like cover but only resizing if the original image is smaller than the given minimum (width and height).
• minInside - Same as the inside mode but only if the original image is smaller than the given minimum (width and height).
• coverLimit - Same as the cover mode but only if the original image is larger than the given limit (width and height)
• thumbnail- Generate a thumbnail using face detection.
• cropping - Used to extract a given width & height out of the original image. The original proportions are retained.

Check out Cloudinary resize mode Documentation for more details.

Cloudinary modifiers

Beside the standard modifiers, you can also pass the following Cloudinary-specific transformation params to modifiers prop.

rotate

Accepted values:

• Any degree number, or
• auto_right | auto_left | ignore | vflip | hflip

To rotate or flip a given asset by certain degrees, or automatically based on orientation.

roundCorner

Round the specified corners of the desired image. If pass only a number or max (all corners will be applied). The syntax for other use cases is as below:

• Using 2 values: top_left_bottom_right_radius:top_right_bottom_left_radius(Example: 20:40)
• Using 3 values: top_left:top_right_bottom_left:bottom_right (Example: 20:30:40)
• Using 4 values: top_left:top_right:bottom_left:bottom_right (Example: 20:0:40:40)

<nuxt-img  provider="cloudinary"  src="/remote/nuxt-org/blog/going-full-static/main.png"  width="300"  height="169"  :modifiers="{ roundCorner: 'max' }"/>

gravity

Detemine which part of the image to cropped or to place the overlay. Accepted values: auto, subject, face, sink, faceCenter, multipleFaces, multipleFacesCenter, north, northEast, northWest, west, southWest, south, southEast, east, center

<nuxt-img  provider="cloudinary"  src="/remote/nuxt-org/blog/going-full-static/main.png"  width="300"  height="300"  fit="fill"  :modifiers="{ gravity: 'subject' }"/>

effect

Apply a filter or an effect on the desired asset. See Effects for images for the full list of syntax and available effects.

<nuxt-img  provider="cloudinary"  src="/remote/nuxt-org/blog/going-full-static/main.png"  width="300"  height="300"  fit="fill"  :modifiers="{ effect: 'grayscale' }"/>

color

Color to use when text captions, shadow effect and colorize effect are in use.

<nuxt-img  provider="cloudinary"  src="/remote/nuxt-org/blog/going-full-static/main.png"  width="300"  :modifiers="{ effect: 'colorize:50', color: 'red' }"/>

flags

One of more flags to alter the default transformation behavior. See Flags for Images for more information.

dpr

The target device pixel ratio for the asset. auto means automatically matching the DPR settings in user's device.

opacity

Adjust the opacity of the desired image. Scale: 0 to 100 (%).

<nuxt-img  provider="cloudinary"  src="/remote/nuxt-org/blog/going-full-static/main.png"  width="300"  :modifiers="{ opacity: 50 }"/>

overlay

Create a layer over the base image. This can be use with x, y, gravity to customize the position of the overlay.

<nuxt-img  provider="cloudinary"  src="/remote/nuxt-org/blog/going-full-static/main.png"  width="100"  height="100"  fit="thumb"  :modifiers="modifiers"/><script>  export default {    data() {      return {        modifiers: {          gravity: 'north',          overlay: 'text:default_style:Hello+World',        }      }    }  }</script>

See Overlay Documentation for more information.

underlay

Create a layer below a partial-transparent image. This can be use with x, y, gravity to customize the position of the overlay.

transformation

A pre-defined named transformation to apply to the asset.

zoom

Use together with fit='crop' or fit='thumb' to decide how much of original image/video surronding the face to keep using face detection.

<template>  <nuxt-img    provider="cloudinary"    src="/remote/nuxt-org/blog/going-full-static/main.png"    width="100"    height="100"    fit="thumb"    :modifiers="modifiers"  /></template><script>  export default {    data() {      return {        modifiers: {          zoom: 0.75,          gravity: "face"        }      }    }  }</script>

colorSpace

Color space to use for the delivery image url. See Color space Documentation for accepted values details.

<nuxt-img  provider="cloudinary"  src="/remote/nuxt-org/blog/going-full-static/main.png"  width="300"  :modifiers="{ colorSpace: 'srgb' }"/>

customFunc

Call a custom function on Cloudinary side. See Custom Functions for more details.

density

To define the density number when converting a vector file to image format.