Image & Video APIs

Image fallbacks in JavaScript (video tutorial)

Last updated: Nov-24-2025

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.

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 dynamically—for 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 doesn’t 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 doesn’t 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!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page:

Image fallbacks in JavaScript (video tutorial)

Configure the JavaScript SDK

Color Accessibility in JavaScript

Optimization Tips

Error