Placeholder image shown for listings with no uploaded image

A broken-image icon on a listing card is the visual equivalent of a 500 error — users interpret it as site neglect and scroll past the listing entirely, regardless of how good the underlying content is. Browse pages with scattered broken images look abandoned, review crawlers flag the domain for quality issues, and social previews (Open Graph, Twitter Card) fall back to site defaults instead of listing-specific imagery. A category-appropriate placeholder keeps the grid visually uniform and signals the listing is real, just not yet photographed.

Add a fallback placeholder image per category and render it whenever imageUrl is null or unreachable. Keep the placeholders in public/images/placeholders/ with one variant per top-level category so cards stay visually coherent. Wrap the <img> in a small ListingImage component that handles the null case and sets an onError handler to swap in the placeholder if the CDN URL later 404s.

export function ListingImage({ listing }: Props) {
  const fallback = `/images/placeholders/${listing.category}.png`
  return <img src={listing.imageUrl || fallback} alt={listing.name} loading="lazy" />
}