Styling broken images (with Tailwind and React)

After using for a couple of weeks, I started seeing broken image avatars. The app does not import data for unfollowed accounts; at some point, the imported image avatars break, and it look like this:

Broken image looking bad

Shai Schechter to the rescue! He climbed onboard for Friday's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands to help us out.

Screendump of stream

He proposed listing for the image's load and error events to determine its status. It also meant we could add a nice pulsating style while loading.

import clsx from "clsx";
import React, { useState } from "react";

export function Avatar({ imageUrl, altText, className }) {
  const [status, setStatus] = useState("loading");

  const handleOnLoad = () => {

  const handleOnError = () => {

  return (
        "overflow-hidden rounded-full border bg-slate-400",
        status === "loading" ? "animate-pulse" : "",
          status === "fulfilled" ? "visible" : "hidden",

Full disclosure: I set it up as status === "failed" ? "hidden" : "visible" (flipped logic) to begin with, but that resulted in a flicker of a broken image and, to be honest, hiding until success makes much more sense!

All the best,
Queen Raae

Interested in more daily treasures like this one?
Sent directly to your inbox?