Fixing Cropped Images Not Displaying Correctly

TL;DR 😼

When you replace an image with a cropped version but keep the same URL, the browser may show the old image because of caching. Add a timestamp (or unique suffix) to the filename so the URL changes—the image updates correctly. 📸

Situation

I was building an image crop feature using react-easy-crop. The library is simple and easy to use.

User selects an saved image → Crops it → Save the cropped image

Problem: After saving, the component did not re-render with the new image. The old (uncropped) image kept showing.

Digging the Cause 🧐

After reloading the page, the new image was displayed––so the cropped image was being saved correctly. I opened the browser's developer console and checked the image element. When I hovered over the URL, it showed the cropped image.

So...

• The image file content was different (cropped), but the URL was identical.

• The browser treated it as the same resource and showed its cached version.

• Conclusion: If the URL does not change, the browser may not reload the image.

How I fixed it 👩‍💻

Make the URL different when the image is cropped so the browser fetches the new file. I went with a simple fix—we don't have many images in the app, also we don't use the crop feature often.

• Change the filename when you save the cropped image by adding a timestamp (or any unique value) before the extension.

• New URL → No cache hit → Correct image is displayed.

Example helper in TypeScript:

/**
 * Adds a timestamp to the filename so the URL becomes unique.
 * Useful when replacing an image (e.g. after crop) to avoid browser cache.
 */
export const addTimestampToFileName = (fileName: string): string => {
  const timestamp = new Date().getTime();
  const lastDotIndex = fileName.lastIndexOf(".");

  if (lastDotIndex === -1) {
    return `${fileName}_${timestamp}`;
  }

  const nameWithoutExtension = fileName.substring(0, lastDotIndex);
  const extension = fileName.substring(lastDotIndex + 1);
  return `${nameWithoutExtension}_${timestamp}.${extension}`;
};

Usage idea:

// Before: "photo.jpg"  →  After: "photo_1708234567890.jpg"
const newFileName = addTimestampToFileName(originalFileName);
// Use newFileName when saving the cropped image and when setting the image URL

When you use this new filename for the cropped image URL, the browser sees a new resource and shows the updated image. ✅

Wrap up 😎

• Same URL + changed file content → browser can keep showing the cached (old) image.

• Different URL → browser loads the new image.

• For replaced images (e.g. after crop), make the URL unique (e.g. timestamp in the filename) so the UI updates correctly without hacks like forcing a component reload.

If the cropped (or otherwise replaced) image does not update on screen, check whether the image URL changed. If it stays the same, the browser cache is likely the cause. Adding a timestamp to the filename is a simple way to get a new URL and reliable updates. 🎯