From 7bb39a6f62c9ae93205f1a2ffbbe363fc19f05e7 Mon Sep 17 00:00:00 2001 From: Md Waqib Sk Date: Tue, 30 Sep 2025 22:49:41 +0530 Subject: [PATCH 1/4] add: guide for delivering remote images --- docs/pages/guides/remote-images.mdx | 96 +++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 docs/pages/guides/remote-images.mdx diff --git a/docs/pages/guides/remote-images.mdx b/docs/pages/guides/remote-images.mdx new file mode 100644 index 00000000..db40a447 --- /dev/null +++ b/docs/pages/guides/remote-images.mdx @@ -0,0 +1,96 @@ +import Head from 'next/head'; +import CodeBlock from '../../components/CodeBlock'; +import OgImage from '../../components/OgImage'; +import Video from '../../components/Video'; + + + + Remote Images - Next Cloudinary + + + + + + +# Working with Remote Images + +You can leverage Cloudinary's powerful transformation and delivery features even for images not stored in your Cloudinary account. + +Next-cloudinary provides two primary methods for working with remote images: + +## Method 1: Fetching Remote Images On-the-Fly + +The `Fetch` delivery method allows you to use a remote image URL as a source for the `CldImage` component. + +Cloudinary will fetch the image, apply transformations, cache it on the CDN, and deliver it, all without storing it in your Media Library. + +This is the simplest way to get started with remote media. + +### Example: + +To use this method, provide the remote image URL to the `src` prop and add the `deliveryType="fetch"` prop + + +```jsx copy showLineNumbers + import { CldImage } from 'next-cloudinary'; + + + ``` + +This will generate a Cloudinary URL prefixed with `/image/fetch/`, which instructs Cloudinary to retrieve the image from the source URL + +## Method 2: Auto-Uploading Remote Images + +This method automatically uploads an image from a remote source to your Cloudinary Media Library the first time it's requested. + +Subsequent requests will serve the now-stored Cloudinary asset. This is a powerful Cloudinary feature that works seamlessly with next-cloudinary. + +### Use Cases + +- Migrating an existing media library from a service like S3 to Cloudinary without downtime +- Permanently storing and managing remote assets in Cloudinary +- Building a media library from a trusted, remote source over time + +### How to Set Up Auto-Upload Mapping: + +1. Navigate to your Cloudinary settings: Go to `Settings` >` Upload`. +2. Find the `Auto upload mapping` section: Here you will define the mapping. +3. Create a new mapping: +- **Target Folder**: : A virtual folder name to use in your src prop (e.g., `s3-images`). +- **Source URL prefix**: Paste the base URL of your remote image storage (e.g., `https://my-s3-bucket.s3.amazonaws.com/images/`). +4. Save your changes + +### Example Usage: +