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'
import { STORAGE_TYPES, RESIZE_TYPES, Gravity } from '@cld-apis/utils'

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

const url = buildImageUrl('paste-the-copied-path', {
  cloud: {
    storageType: STORAGE_TYPES.FETCH
  },
  transformations: {
    resize: {
      type: RESIZE_TYPES.FILL,
      width: 200,
      height: 200,
    },
    radius: 'max',
    gravity: Gravity.Subject
  }
})