Usage

The CldImage component provides an easy way to deliver images from Cloudinary with the same experience you'd expect inside of a Nuxt app. With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations.

Under the hood, this CldImage uses Unpic for delivering optimized images. Check out the documentation of Unpic for all available props and options like priority, loading, sizes, and more!

Basic Usage

The basic required props include width, height, src, and alt:

<template>
  <CldImage
    src="cld-sample-5"
    width="400"
    height="400"
    alt="My Awesome Image"
  />
</template>

Thanks to the auto import feature of Nuxt, you do not need to import anything. Just add <CldImage /> to your template and optimize your images!

The src property takes in a Cloudinary Public ID which includes the folder path along with the ID of the image itself. The width and the height should represent the rendered size and the alt value should be a text-based description of the image. The sizes prop is optional, but recommended for Responsive Sizing.

Transformations

Using CldImage.vue component is really straight forward. It accepts the same attributes as native img tag (such us sizes, width, loading, etc) but also a bunch of Cloudinary specific props used to optimize/transform the image (such as removeBackground, overlays, gravity, etc):

<CldImage
  width="987"
  height="987"
  src="images/woman-headphones"
  sizes="50vw"
  crop="thumb"
  gravity="faces"
  removeBackground
  tint="40:253f8c"
  :underlay="'images/city-skyline'"
  :overlays="[
    {
      position: {
        gravity: 'north',
        y: 60
      },
      text: {
        color: 'rgb:52a4ff80',
        fontFamily: 'Source Sans Pro',
        fontSize: 320,
        fontWeight: 'black',
        text: 'MUSIC',
        letterSpacing: -10,
        lineSpacing: -100,
        stroke: true,
        border: '20px_solid_rgb:2d0eff99',
      }
    },
    {
      position: {
        gravity: 'south',
        y: 60
      },
      text: {
        color: 'rgb:52a4ff80',
        fontFamily: 'Source Sans Pro',
        fontSize: 320,
        fontWeight: 'black',
        text: 'IS LIFE',
        letterSpacing: -10,
        lineSpacing: -100,
        stroke: true,
        border: '20px_solid_rgb:2d0eff99',
      }
    }
  ]"
/>

For all available configuration options, checkout the next page.

Using Cloudinary URL's

CldImage supports passing a fully qualified Cloudinary URL as the src, however, it must include a version number (/v1234) in order to be correctly parsed.

<template>
  <CldImage
    src="https://res.cloudinary.com/mycloud/image/upload/v1234/cld-sample-5"
    width="400"
    height="400"
    alt="My Awesome Image"
  />
</template>

Preserving URL Transformations

If using a full Cloudinary URL, you might already have transformations applied to your image.

To preserve those transformations, you can apply the preserveTransformations prop:

<template>
  <CldImage
    src="https://res.cloudinary.com/mycloud/image/upload/w_100,h_200,c_fill/v1234/myimage"
    width="400"
    height="400"
    alt="My Awesome Image"
    preserveTransformations
  />
</template>

Watch & Learn