Skip to content
Svelte Cloudinary

Adding a Custom Domain

Enhance the delivery of your media assets by integrating svelte-cloudinary with a private CDN and/or custom domain.

Step-by-Step Configuration

1. Install Dependencies

Ensure you have svelte-cloudinary installed in your project:

Terminal window
npm install svelte-cloudinary

2. Set Up Environment Variables

Create a .env file in your project root (if it doesn’t exist already) and add the following variables:

Terminal window
VITE_CLOUDINARY_CLOUD_NAME="your_cloud_name"
VITE_CLOUDINARY_PRIVATE_CDN="true"
VITE_CLOUDINARY_SECURE_DISTRIBUTION="your-custom-domain.com"

Replace your_cloud_name with your actual Cloudinary cloud name and your-custom-domain.com with your custom domain. Read more about configuring svelte-cloudinary here.

Example Usage

With the configuration in place, use the <CldImage /> component to serve images through your private CDN and custom domain:

<script>
  import { CldImage } from 'svelte-cloudinary';
</script>


<CldImage
  src="<Your Public ID>"
  alt="Sample Image"
  width="800"
  height="600"
/>

This setup ensures that the image URL follows your custom domain structure:

  • Before: https://res.cloudinary.com/your_cloud_name/image/upload/sample.jpg
  • After: https://your-custom-domain.com/image/upload/sample.jpg

Learn more about setting up CNAME records on the Cloudinary docs.