Customize Logo API Fallback

Learn how to handle 404s and implement your own fallback image.

When working with Logo API, implementing proper fallback handling ensures a smooth user experience. While we provide built-in fallback options, here’s how to implement custom fallback handling for 404s and loading states in React.

Enhanced Fallback Mechanism

Our React approach combines the basic fallback structure with error handling and loading states:

const LogoCDN = ({ domain, clientId, fallbackText = "N / A" }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  // Transparent 1x1 pixel PNG used as initial placeholder
  const transparent = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=`;

  // Construct the logo URL with domain and client ID
  const logoCDN = `https://cdn.brandapi.io/${domain}/fallback/404/icon?c=${clientId}`;

  // Determine which source to use based on component state
  const src = !isLoading && !isError ? logoCDN : transparent;

  return (
    <div className="wrapper">
      <img
        onLoad={() => setIsLoading(false)}
        onError={() => setIsError(true)}
        alt="Logo by BrandApi"
        className="icon"
        src={src}
      />
      {/* Fallback UI shown only when there's an error loading the logo */}
      {isError && (
        <div className="fallback">
          <p>{fallbackText}</p>
        </div>
      )}
    </div>
  );
};

Key Considerations

1. Initial State: We use a transparent 1x1 pixel PNG to avoid broken image icons while the logo is loading.
2. Error Handling: The onError event triggers the fallback UI (e.g., initials or a generic icon).
3. Logo API Parameters: The URL uses /fallback/404/icon to ensure our CDN returns a 404 when the logo isn’t found, allowing the frontend to take over.