Web projects
Handle an image that fails to load
By SI100x · Published
Images can fail even when the surrounding page is working. A small fallback exercise helps you prevent broken artwork from becoming the only identifying information for a card or profile.
Try this exercise
- Create a card with a real local image, then give a second card an intentionally invalid image path. Keep a visible title outside the image area.
- Replace failed artwork with a simple fallback that uses the content’s category or initials where appropriate. Do not fabricate a person’s photo or identity.
- Change the card to a different record after the first image fails. Verify that the failure state does not incorrectly hide the new record’s valid image.
Check your result
The card should still explain what it represents and where its link goes. Meaningful images need useful alternative text; purely decorative images should not create unnecessary screen-reader announcements.
Explore your next step
Compare course curricula or try a free live demo to ask about prerequisites and practice work.