Event Ticket and Venue Image Placeholders

Context

Event images arrive late and from inconsistent sources

Event organizers create listings on ticketing platforms days or weeks before uploading cover art. For recurring events, organizers may upload art for the first instance and neglect to update it for subsequent dates — leaving outdated images attached rather than missing ones.

Venue photo galleries are a separate problem: venues upload photos once during platform onboarding, then never update them. After two years, CDN asset URLs may have expired, venue management software may have migrated to a new provider, or the venue itself may have closed.

Event card

Event listing card cover image fallback

Event cards in a browse-events grid show a cover image at around 400x225 (16:9) or 400x300 (4:3). Use a category-colored fallback with the event name or category label as text.

Map event categories to warm, high-energy palette colors. Music events are good candidates for deep purple or red; sports events for green or navy; conferences for blue.

const EVENT_PALETTE: Record<string, [string, string]> = {
  music:       ['7C3AED', 'EDE9FE'],
  sports:      ['15803D', 'DCFCE7'],
  conference:  ['1D4ED8', 'DBEAFE'],
  festival:    ['EA580C', 'FFF7ED'],
  theatre:     ['9D174D', 'FCE7F3'],
  food:        ['CA8A04', 'FEF9C3'],
  comedy:      ['0369A1', 'E0F2FE'],
  default:     ['7C3AED', 'F5F3FF'],
};

function eventCoverFallback(
  eventName: string,
  category: string,
  w = 400,
  h = 225,
): string {
  const [bg, fg] = EVENT_PALETTE[category.toLowerCase()] ?? EVENT_PALETTE.default;
  const label = encodeURIComponent(eventName.slice(0, 30));
  return `https://fallback.pics/api/v1/${w}x${h}/${bg}/${fg}?text=${label}`;
}

Ticket confirmation

Event image in ticket and booking confirmation

Ticket confirmation pages show the event cover image prominently alongside order details. The image is loaded at this point from the event listing data, which may have been created days ago. Signed image URLs in the event data may have expired.

Store the event cover fallback URL alongside the event cover URL in the booking record at checkout time. Render whichever resolves first.

// At booking time: compute and store fallback URL
const booking = {
  eventId: event.id,
  eventName: event.name,
  eventCoverUrl: event.coverImageUrl,
  eventCoverFallbackUrl: eventCoverFallback(event.name, event.category, 800, 450),
};

// Confirmation page
<img
  src={booking.eventCoverUrl ?? booking.eventCoverFallbackUrl}
  width={800}
  height={450}
  alt={`${booking.eventName} event cover`}
  onError={(e) => { e.currentTarget.src = booking.eventCoverFallbackUrl; }}
/>

Venue gallery

Venue detail page photo gallery fallbacks

Venue pages show exterior and interior photos, capacity configuration images, and floor plan overlays. These assets are uploaded once during onboarding and rarely refreshed. Long-lived signed URLs are a common failure point two or three years after initial upload.

Apply a venue-specific fallback (teal or warm stone palette, venue name as text) at each gallery slot. The fallback keeps the gallery strip visually consistent even when individual slots fail.

function venuePhotoFallback(venueName: string, w = 600, h = 400): string {
  const label = encodeURIComponent(venueName.slice(0, 25));
  return `https://fallback.pics/api/v1/${w}x${h}/0D9488/CCFBF1?text=${label}`;
}

// Gallery
{venue.photos.map((photo, i) => (
  <img
    key={i}
    src={photo.url}
    width={600}
    height={400}
    alt={`${venue.name} photo ${i + 1}`}
    onError={(e) => { e.currentTarget.src = venuePhotoFallback(venue.name); }}
    loading="lazy"
  />
))}

No-art state

Newly created events with no cover art

A newly created event listing may go live with no cover art uploaded. Rather than showing a broken slot, render the category-colored fallback immediately. The fallback URL is constructed from event data available at creation time, so no async requests are needed.

Once the organizer uploads cover art, the listing API returns a non-null coverImageUrl. The component picks it up on the next render. No state management needed beyond the standard null check.

// EventCard – handles no art, broken art, and real art in one component
function EventCard({ event }: { event: Event }) {
  const fallback = eventCoverFallback(event.name, event.category, 400, 225);
  return (
    <article>
      <img
        src={event.coverImageUrl ?? fallback}
        width={400}
        height={225}
        alt={event.name}
        onError={(e) => { e.currentTarget.src = fallback; }}
        loading="lazy"
      />
      <div>
        <span>{event.category}</span>
        <h3>{event.name}</h3>
        <time>{event.date}</time>
      </div>
    </article>
  );
}

Further reading

Event and venue image fallback as a first-class feature

Event platforms where organizers control image assets need to treat fallbacks as a first-class feature, not an edge case. Build the fallback URL into the event creation API response so every event always has a valid, renderable image URL from the moment it is created.

# https://fallback.pics/docs/
# https://fallback.pics/placeholder-image-api/
# https://fallback.pics/blog/product-image-placeholder-ecommerce-catalogs/
# https://fallback.pics/blog/job-board-logo-avatar-fallbacks/