VALIDATION LAB•IMAGE HANDLING LAB

Image Handling Lab

Intermediate

Validate working, broken, slow, unauthorized, and corrupted image states with fallbacks, loading indicators, retry actions, and layout stability checks.

Test instructions

Identify which images fail to load and compare them with the failed count

Do this: Identify which images fail to load and compare them with the failed countExpected: Successful images render, failing images stop loading and show useful fallback UI with truthful alt text, and slow images do not spin forever.

Live test area · interact here

Image Handling Lab

Broken image QA scenarios

Validate loading, error handling, fallback copy, layout stability, and retry behavior across realistic image states.

Failed images: 0

Loading images: 5

Layout: risk of shift

Loading image...

Working image

Expected: 200 OK

Loading image...

Broken image

Expected: 404 Not Found

Loading image...

Slow loading image

Expected: Delayed 200 OK

Loading image...

Unauthorized image

Expected: 403 Forbidden

Loading image...

Corrupted image

Expected: Corrupted binary

Interact with the widget aboveStatus updates as you test

Understand the behavior

Manual test guide

Test it before writing code

Practice manually, then automate what you just tested.

Related practice

Ready to practise another UI behavior?

Move to the next module whenever you are ready, or browse the full UI Elements catalog.

Continue to File Upload →Explore Forms

Image Handling Lab

Working image

Broken image

Slow loading image

Unauthorized image

Corrupted image

Manual test guide

Identify which images fail to load and compare them with the failed count

Verify `image-error-{n}` fallback UI appears for every failed image

Check that failed image cards keep a stable layout height

Confirm the slow image eventually leaves `image-loading-3` unless the infinite-spinner bug is enabled

Use Retry load on failed images and verify loading/error states are observable

Ready to practise another UI behavior?