tencent cloud

Image
Download PDF
Last updated:2026-02-03 15:53:24
Image
Last updated: 2026-02-03 15:53:24
Download PDF

Component Feature

A component for displaying images, supporting various adaptation modes, position, size, border, and rounded corners.

Basic Usage

Specify the image URL via src, control the adaptation mode with fit, and provide alternative text using alt.
Template example:
<Image
  src="https://picsum.photos/id/237/400/400"
  alt="example image"
  fit="cover"
/>
Effect display as follows:




Attribute Description

Property Name
Type
Description
Default value
src ★
string
Image URL
-
alt
string
Alternative text for images
-
frame
boolean
Whether to display the border
false
fit
"cover" | "contain" | "fill" | "scale-down" | "none"
Image adaptation mode
"cover"
position
ImagePosition
Image location
"center"
flush
boolean
Whether to display at the edge
false

Dimension Property

Property Name
Type
Description
Default value
height
number | string
Height
-
width
number | string
Width
-
size
number | string
Set both width and height at the same time
-
minHeight
number | string
minimum height
-
minWidth
number | string
minimum width
-
minSize
number | string
minimum size
-
maxHeight
number | string
max height
-
maxWidth
number | string
Maximum width
-
maxSize
number | string
Maximum size
-
aspectRatio
number | string
Aspect ratio
-
radius
RadiusValue
rounded corners
-
margin
number | string | Spacing
margin
-
Note:
Marked with required attribute.

ImagePosition Type

Used to control the display position of images in containers. Available values:
"top left" - upper-left
"top" - top center
"top right" - top right
"left" - left center
"center" - center
"right" - right center
"bottom left" - lower-left
"bottom" - bottom center
"bottom right" - lower-right

Adaptation Mode Description

cover: Maintain the ratio and crop to fill the container.
contain: Maintain the ratio and display the image fully.
fill: Stretch the image to fill the container.
scale-down: Select the smaller one between none and contain.
none: Keep the original size.

Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback