Automattic / Automattic/jetpack

Image Compare does not show if images fail to load

Open
#37,898 4 comments 0 reactions 0 assignees View on GitHub
[Block] Image Compare [Plugin] Jetpack [Pri] Normal Bug Customer Report [LEGACY] Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Quick summary

The Image Compare block does not display anything at all if either of the images fails to load.

There's something going on with private WoA sites that makes this reliably happen during Calypso E2E tests, as the images for some reason like to return an HTTP 403 in the editor.

### Steps to reproduce

1. Create an Image Compare block where at least one of the images will fail to load.
2. Attempt to view it.

### A clear and concise description of what you expected to happen.

Some sort of UI shows up, even if it shows with broken images.

### What actually happened

No UI appears.

### Impact

Some (< 50%)

### Available workarounds?

No but the platform is still usable

### Platform (Simple and/or Atomic)

_No response_

### Logs or notes

There's no `onerror` handler in this code
https://github.com/Automattic/jetpack/blob/149908db2326640d58a5598f00f2b834046b8c1d/projects/plugins/jetpack/extensions/blocks/image-compare/view.js#L24-L37
I don't know what sort of handler would be appropriate; if the image failed to load. just calling `_onLoaded()` may not work right since it won't be able to fetch the image width.

See also some discussion at p1718037538537979-slack-CBG1CP4EN

Contributor guide

Open the contributing guide

Research direction

Start with projects/plugins/jetpack/extensions/blocks/image-compare/view.js, especially the image-loading code linked in the issue, and reproduce the block with an image that returns an error. Trace how the block becomes visible only after loading and determine the appropriate failure behavior. Done means the Image Compare UI still appears when either image fails to load, with coverage for that case if an existing test entry point is found.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, wordpress
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.