Image

You might say

Let me add images to the article, and make sure they don't get distorted on phones.

Display an image with the right size, crop, and fallbackAn image component can handle aspect ratio, cropping, lazy loading, preview, and loading failure consistently. Reserve its space to prevent layout shifts. Meaningful images need alternative text; purely decorative images should be ignored by screen readers.

🔍 Preview

⚠
Loading failed

Image≠Icon

Image shows a photo, illustration, or the content itself. icon is a small reusable symbol for an action or status.

Image≠Video

Image is one static frame. video has time-based content such as play, pause, duration, and sound.

When to use it

Product and article media
Profile or team photos
Responsive thumbnails
Images that need preview or loading states

When NOT to use it

Stretch an image into the wrong ratio
Load full-size files for tiny thumbnails
Leave a broken-image icon with no fallback
Write alternative text that adds no useful meaning

Anatomy

🔍 Preview

Decide on size and cut

What is really shown

Hover to appear, click to enlarge

Variants

Cover

The proportion of the container is fixed and it would rather be cut off than deformed.

Contain

The content of the picture cannot be cropped, and the whole picture must be read even if the margins are left.

Circle

Special for avatars, cut into rounded corners

Fallback

⚠
Loading failed

Placeholder when image loading error occurs

Typical use cases

Product photo

Desktop lifting table

¥1,299

Outdoor mountaineering bag 40L

¥459

Article cover

Alex Chen · 2 hours ago

This set of scene diagrams is so intuitive that it has been copied into the team specifications 👍

maya-lee · 5 hours ago

Zhengchou how to explain the empty status to newcomers, forwarded

Gallery preview

Article image (preview mask appears when hovering):

🔍 Preview

User profile

🖼️ Image loading failed

alt="Mountain Hiking Route Real Shots" —— Placeholder and explanatory text are still displayed when loading fails.