Issue

Most images and icons do not appear in my session replays. They show as empty gray boxes (Browser SDK) or solid colored rectangles (mobile SDKs) during playback.

Applies To

All SaaS Customers and Self-Hosted Users
Session Replay
Browser and mobile SDKs

Symptoms

Images and icons appear as empty boxes (Browser) or solid colored rectangles (mobile) in the replay.
On the Browser SDK, the replay's Tags tab shows sdk.replay.blockAllMedia set to true.

Resolution

Session Replay hides media by default to protect user privacy, so images and icons are blocked (Browser) or masked (mobile). How you show them depends on your SDK. In every case, this is private by default, so only reveal media that you are certain contains no personally identifiable information (PII).

Browser (JavaScript) SDK

The blockAllMedia option defaults to true, which blocks img, svg, video, object, picture, embed, map, and audio elements before the replay leaves the browser. Choose one of the following:

Unblock specific elements (recommended). Keep media blocked by default and allow only the elements you choose with unblock, which takes precedence over blockAllMedia:
```
Sentry.replayIntegration({
  // your existing config
  unblock: [".your-logo-class", ".your-icon-button-class", "[data-sentry-unblock]"],
});
```
Allow all media. Set blockAllMedia to false to capture all images and videos:
```
Sentry.replayIntegration({
  blockAllMedia: false,
});
```

Note: since v8, unblock and unmask no longer add the previous default selectors. If you relied on the v7 defaults, specify them explicitly in your configuration. For all options, see the Browser Session Replay privacy documentation.

If media still does not render after unblocking, the cause is asset access, not masking. The Browser SDK does not embed referenced assets. It stores their URLs and fetches them from sentry.io during playback. If those assets are not publicly reachable or do not allow sentry.io via CORS, they will not render. Test from a publicly hosted environment (not localhost) and add sentry.io to the Access-Control-Allow-Origin header for the assets. For the related whole-replay case, see Why are my replays blank?.

Mobile SDKs (iOS, Android, React Native, Flutter)

Mobile replays mask images by default via maskAllImages, drawing a rectangle in the image's dominant color over each image, so images appear as solid colored blocks rather than empty boxes. To show images, either unmask specific views (recommended) or disable maskAllImages. Disable it only on content free of sensitive data:

iOS (Apple):

options.sessionReplay.maskAllImages = false

Android:

options.sessionReplay.maskAllImages = false

React Native:

Sentry.mobileReplayIntegration({
  maskAllImages: false,
});

Flutter:
```
options.privacy.maskAllImages = false;
```

On Android and React Native, these options apply to the default PixelCopy strategy; with the Canvas strategy all content is always masked. For per-view masking and unmasking, see the privacy docs for your SDK: iOS, Android, React Native, and Flutter.

In all SDKs, changes apply only to replays recorded after you deploy them.

Images are not being displayed in my replays