Image fallbacks in JavaScript (video tutorial)

Overview

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

Video tutorial

Tutorial contents

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

Why image placeholders matter

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

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

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

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

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

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.