Advanced

Display a remote image via Cloudinary

Let's fetch the below remote image via Cloudinary:

A remote image example with Cloudinary

And display it as 200x200 in size, round and auto-cropping avatar:

A fetched and optimized image

import { setConfig, buildImageUrl } from 'cloudinary-build-url'

setConfig({
  cloudName: 'your-cloud-name',
})

const url = buildImageUrl('paste-the-copied-path', {
  transformations: {
    resize: {
      type: 'fill',
      width: 200,
      height: 200,
    },
    radius: 'max',
    gravity: 'auto:subject'
  }
})