Viewing: console.cloudinary.com

Image & Video APIs

Copy for LLM Download Markdown Get Started Agent Skills

Last updated: Jun-02-2026

Overview

Display placeholders as a fallback when images fail to load using the JavaScript SDK.

On this page:

Overview
Video tutorial
Tutorial contents
Keep learning

This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

Download Transcript

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Why image placeholders matter


[Jump to this spot in the video]0:00	Broken images are one of the most noticeable ways to create a poor user experience on your site. This is especially common when loading images dynamicallyfor example, when linking images to product IDs or usernames.

Preventing broken links with placeholders

[Jump to this spot in the video]0:25 Instead of showing broken image links, Cloudinary lets you use image placeholders. If you're managing images at scale with Cloudinary, you're likely uploading them programmatically via an upload pipeline and referencing them by public ID. If something breaks during that upload process, you could be left with broken image links on your site. Fortunately, Cloudinary offers a defaultImage parameter to serve a backup image instead.


[Jump to this spot in the video]0:25	Instead of showing broken image links, Cloudinary lets you use image placeholders. If you're managing images at scale with Cloudinary, you're likely uploading them programmatically via an upload pipeline and referencing them by public ID. If something breaks during that upload process, you could be left with broken image links on your site. Fortunately, Cloudinary offers a `defaultImage` parameter to serve a backup image instead.

Rendering a dynamic image list


[Jump to this spot in the video]0:54	In the demo, we iterate over a list of image IDs (in this case, letters of the alphabet). In your app, this could be product images, user avatars, or anything else. The code uses the Cloudinary SDK to define the image list, render the images by mapping over them, and construct image tags with optimized URLs. Assuming you've already installed and configured the JavaScript SDK, here's the code for iterating and preparing the images for display:

[Jump to this spot in the video]0:54

In the demo, we iterate over a list of image IDs (in this case, letters of the alphabet). In your app, this could be product images, user avatars, or anything else. The code uses the Cloudinary SDK to define the image list, render the images by mapping over them, and construct image tags with optimized URLs. Assuming you've already installed and configured the JavaScript SDK, here's the code for iterating and preparing the images for display:

What happens when an image is missing

[Jump to this spot in the video]1:32 When one of the image IDs in the list doesnt exist in your Cloudinary Media Library (for example, when changing the image public ID from c to see) the image fails to load, resulting in a broken image. This creates a poor user experience. Fortunately, Cloudinary allows you to configure a default image that's delivered automatically in such cases, ensuring your layout remains visually consistent and user-friendly.


[Jump to this spot in the video]1:32	When one of the image IDs in the list doesnt exist in your Cloudinary Media Library (for example, when changing the image public ID from `c` to `see`) the image fails to load, resulting in a broken image. This creates a poor user experience. Fortunately, Cloudinary allows you to configure a default image that's delivered automatically in such cases, ensuring your layout remains visually consistent and user-friendly.

Setting the default image


[Jump to this spot in the video]1:50	First, upload your fallback image to your Media Library. In the example, the fallback image is called `sea.jpg.` Then, update your code to chain the `.delivery()` method and add the `.defaultImage()` setting. This tells Cloudinary to serve `sea.jpg` whenever one of the requested images is missing.

Verifying the fallback behavior


[Jump to this spot in the video]2:25	With this setup, whenever an image is missing, Cloudinary displays the default image. In the demo, changing the image IDs (e.g., from `a` to `x` or `b` to `y`) shows that the placeholder image is used consistently. This ensures that users never encounter a broken image again.

Keep learning

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

Feedback sent!