Skip to main content
Frontend Glossary

UI components · Fundamentals

Image

Also called: img, Picture, Thumbnail, Cover image

Shows a picture on the page. You usually need to handle the aspect ratio, a loading placeholder, load failures, and click-to-zoom preview.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Put a cover image at the top of the product card. Give the container a fixed 4:3 ratio, crop the image to fill it with object-fit: cover, and round the corners by 8px. While loading, show a light gray placeholder, and if it fails, show a gray background with an image icon. Only load the image when it enters the viewport. Clicking it opens a fullscreen preview. Use the product name as the alt text.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Image is what you need.

Use Image when

  • A product, article, or piece of work needs a cover image or illustration
  • The image is the core of the content, and users need to click to zoom in on details
  • A set of images in different sizes needs to be cropped to the same ratio

Pick something else when

  • Small round pictures like user profile photos; use the avatar component, which has a built-in text fallback

    Use insteadAvatar

  • Purely decorative shapes or functional icons; icons or CSS are lighter

  • You need to rotate through several equally important images

    Use insteadCarouselGallery

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    No fixed aspect ratio, so the image pushes the content below it down when it loads

  2. 02

    Hard-coding width and height so the image gets stretched, without using object-fit

  3. 03

    Showing the browser's default broken-image icon when loading fails, with no fallback

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A container with a fixed aspect ratio holding the image itself, optionally with a loading placeholder, a fallback image for failures, and a click-to-zoom preview layer.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

An image looks like the simplest thing, but doing it right means handling several things. Aspect ratio: give the container a fixed ratio first (like 16:9 or 1:1), and use object-fit: cover so the image is cropped to fill it instead of being stretched out of shape. Loading: show a light gray placeholder until it loads, and use lazy loading to delay downloading images that are off screen. Load failure: show a gray fallback block with an icon instead of the browser's default broken-image icon. Alt text: describe the image in alt for screen readers and search engines.

Image components in component libraries (like Image in Ant Design or Element Plus) usually also include click-to-zoom preview and switching between images. When showing several images together, consider organizing them with a Gallery, a Card Grid, or a Carousel. Small round pictures like user profile photos belong to the Avatar component.

Developer info
Term ID
component-image
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • img
  • picture
  • figure:has(img)
  • .ant-image
  • .el-image
  • .arco-image
  • .t-image__wrapper
  • .n-image
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026