Real Estate Listing Photo Fallbacks

Failure modes

How real estate listing photos fail in production

MLS photo feeds update on a schedule that does not match listing status. A listing marked active may have photos attached in the MLS system but not yet synced to your platform. An expired listing's photos may have been purged from the upstream CDN before your cache TTL expired.

Agent-uploaded photos can fail from storage provider outages, accidental deletion, or signed URL expiration. Large photo sets — 30+ images per listing — give more chances for individual URLs to fail.

The practical impact: a property with 25 photos where the hero image fails looks far worse than a listing with no photos and a clean placeholder.

Hero image

Listing card and hero photo fallbacks

The primary listing photo appears on search result cards, map marker pop-ups, and the listing detail page hero. It is the most visible image on the platform and the first photo a buyer sees.

Use a fallback URL that communicates property type and availability status. A house silhouette with "No Photos Yet" on a warm neutral background is more informative than a blank.

const RE_FALLBACK_BASE = 'https://fallback.pics/api/v1';

function listingHeroFallback(propertyType: string, w: number, h: number): string {
  const labels: Record<string, string> = {
    house:       'House',
    condo:       'Condo',
    apartment:   'Apartment',
    land:        'Land',
    commercial:  'Commercial',
  };
  const label = encodeURIComponent(labels[propertyType] ?? 'Property');
  return `${RE_FALLBACK_BASE}/${w}x${h}/94A3B8/F8FAFC?text=${label}`;
}

// Hero image component
<img
  src={listing.heroPhotoUrl ?? listingHeroFallback(listing.type, 800, 600)}
  width={800}
  height={600}
  alt={`${listing.address} property photo`}
  onError={(e) => { e.currentTarget.src = listingHeroFallback(listing.type, 800, 600); }}
/>

Gallery

Photo gallery with fallback per slot

Listing detail pages show galleries of 10–40 photos. Buyers cycle through every photo in the set. A broken image in slot 7 is noticed immediately. Each gallery slot needs an independent fallback.

The gallery thumbnail strip at the bottom uses smaller images (typically 120x80 or 160x100). Apply the fallback at the thumbnail level so broken gallery slots do not expand or collapse.

function ListingGallery({
  photos,
  address,
  type,
}: {
  photos: { url: string; caption?: string }[];
  address: string;
  type: string;
}) {
  const heroFallback = listingHeroFallback(type, 1200, 800);
  const thumbFallback = `https://fallback.pics/api/v1/160x100/94A3B8/F8FAFC?text=Photo`;

  return (
    <div>
      {photos.map((photo, i) => (
        <img
          key={i}
          src={photo.url}
          width={i === 0 ? 1200 : 160}
          height={i === 0 ? 800 : 100}
          alt={photo.caption ?? `${address} photo ${i + 1}`}
          onError={(e) => {
            e.currentTarget.src = i === 0 ? heroFallback : thumbFallback;
          }}
          loading={i === 0 ? 'eager' : 'lazy'}
        />
      ))}
    </div>
  );
}

New listing state

No-photo state for newly listed properties

A newly listed property often goes live before photos are uploaded. Show a "Photos Coming Soon" placeholder rather than an empty state or a broken image. The animated skeleton is the right choice here because content is genuinely forthcoming.

Once photos are uploaded and available, the API returns a non-empty photo array. The component should check array length and switch from the animated skeleton to the real photo on the next render cycle.

const COMING_SOON_PLACEHOLDER =
  'https://fallback.pics/api/v1/animated/skeleton/800x600/E2E8F0/F8FAFC';

const MISSING_PLACEHOLDER =
  'https://fallback.pics/api/v1/800x600/94A3B8/F8FAFC?text=No+Photos';

const heroSrc =
  listing.photos.length === 0
    ? (listing.status === 'newly_listed'
        ? COMING_SOON_PLACEHOLDER
        : MISSING_PLACEHOLDER)
    : listing.photos[0].url;

Map pins

Listing photo thumbnails in map marker pop-ups

Map-based property searches show a photo thumbnail inside the map marker or hover pop-up. These are small (100–200px) and must load fast. A broken image here is particularly jarring because the map interaction expects quick visual feedback.

Pre-generate the fallback URL on the server and embed it in the listing data. Map pop-ups should never trigger a secondary fallback lookup that delays the pop-up render.

// API response shape
interface ListingMapPin {
  id: string;
  lat: number;
  lng: number;
  price: number;
  // Compute fallback server-side, not in the browser
  thumbnailUrl: string; // primary photo or fallback.pics URL
}

// Server-side: resolve thumbnail URL before sending to client
function resolveMapThumbnail(listing: Listing): string {
  return listing.photos[0]?.url
    ?? `https://fallback.pics/api/v1/160x120/94A3B8/F8FAFC?text=${encodeURIComponent(listing.type)}`;
}

MLS feed processing

Validate MLS photo URLs during feed ingestion

MLS feeds deliver photo URL arrays that were valid at the time of export. By the time your sync job runs, some URLs may already be dead. Add a HEAD-request validation step to your ingestion pipeline that replaces invalid URLs with fallback.pics URLs before writing to your database.

This is especially important for listing detail pages where the full photo array is rendered. A single validated array write saves dozens of onerror events per page view.

async function validateMlsPhotos(
  photos: { url: string }[],
  type: string,
): Promise<string[]> {
  return Promise.all(
    photos.map(async ({ url }) => {
      try {
        const res = await fetch(url, { method: 'HEAD', signal: AbortSignal.timeout(4000) });
        return res.ok ? url : listingHeroFallback(type, 800, 600);
      } catch {
        return listingHeroFallback(type, 800, 600);
      }
    })
  );
}

Further reading

Placeholder strategy for high-stakes property listings

Real estate listings carry significant financial weight for buyers and sellers. A broken image is not just a cosmetic issue — it can affect listing credibility and buyer confidence. Investing in a solid fallback strategy at both the component and ingestion layer pays off in platform trust.

# https://fallback.pics/docs/
# https://fallback.pics/placeholder-image-api/
# https://fallback.pics/blog/product-image-placeholder-ecommerce-catalogs/
# https://fallback.pics/blog/travel-hotel-gallery-fallbacks/