Broken Image

Broken Image - Prevents broken image icons in local development by serving missing images from a remote server or a configurable placeholder, keeping your site's look and feel intact.

During local development, syncing the entire public:// files folder from staging or production is often impractical. Image fields, media entities, and responsive images all reference files that do not exist locally - resulting in broken image icons that make it hard to work on layout and styling.

The Broken Image module solves this transparently, without modifying any template or theme code:

• Remote server first - configure a remote base URL (staging, production, S3, or CDN) and missing images are rewritten to load directly from that server, showing the real image.
• Placeholder fallback - if no remote URL is configured, a custom placeholder image is displayed instead.
• Local files always win - if a file already exists locally, it is served as normal, untouched.

Features:

• Full support for image styles, responsive
  elements, S3, CloudFront, and CDN
• Debug panel (bottom-right corner) showing images served from remote vs. broken
• Watchdog logging of every missing image for auditing before a file sync
• Drush commands: drush bi-on, drush bi-off, drush bi-status
• Status report integration - warns if the module is accidentally active on a non-development host
• Enabled state stored in the State API - never exported or overwritten by config sync
• settings.php override support for environment bootstrap scripts (DDEV, Lando)
• MutationObserver support for dynamically inserted images from JavaScript

Developer friendly - enable it in seconds and work without the struggle of syncing large files folders.