[{"value":"Preview","id":"preview","hLevel":2,"level":1},{"value":"Code example","id":"code-example","hLevel":2,"level":1},{"value":"ImageProps","id":"imageprops","hLevel":2,"level":1,"children":[{"value":"source","id":"source","hLevel":3,"level":2},{"value":"accessibilityDescription?","id":"accessibilitydescription","hLevel":3,"level":2},{"value":"fit?","id":"fit","hLevel":3,"level":2},{"value":"loading?","id":"loading","hLevel":3,"level":2},{"value":"aspectRatio?","id":"aspectratio","hLevel":3,"level":2},{"value":"viewportSize?","id":"viewportsize","hLevel":3,"level":2},{"value":"border?","id":"border","hLevel":3,"level":2},{"value":"accessibilityRole?","id":"accessibilityrole","hLevel":3,"level":2}]}]

Image

The Image UI component is used to display the product image.

Preview

Code example

render('Checkout::Dynamic::Render', (root) => {
  return <Image
        source="https://img-va.myshopline.com/image/store/1610440173818/8e9f8d2dd769b87343d21876ee3b3825c0801cf9.png?w=1614&h=1788"
        viewportSize="large"
        border={true}
      ></Image>
});

ImageProps

tip

Optional properties are marked with a ?. Properties without a ? are required.

source

string

Image URL.

accessibilityDescription?

string

Detailed descriptive text provided for screen readers to assist customers with visual impairments in understanding the functionality or status of the UI component.

fit?

cover contain

Image display size. By default, the image is displayed at its natural size.

contain: The replaced content is scaled to maintain its aspect ratio while filling the element's content box.
cover: The replaced content will fill the entire content box of the element while maintaining its aspect ratio. If the aspect ratio of the image does not match the content box, the object will be clipped to fit.

loading?

eager lazy

Image loading method.

eager: Load immediately.
lazy: Load with delay.

aspectRatio?

number Default: 1

Sets the image's aspect ratio. For example, if the configured value is 2, the image will be compressed, resulting in a display value of calc(50%). If the configured value is 0.5, the image will be enlarged, resulting in a display value of calc(200%).

viewportSize?

small medium large string

Image viewport size.

small: The image dimensions are 80px by 80px.
medium: The image dimensions are 200px by 200px.
large: The image dimensions are 400px by 400px.

Supports custom viewport sizes:

Percentage: 1%~100%
Pixels: Any valid value (such as 200px)

border?

boolean

Whether to set the image border.

true: With a border
false: Without a border

accessibilityRole?

string

Sets the semantic meaning of the component content. Once set, assistive technologies such as screen readers will use ARIA roles to help customers navigate the page.

Was this article helpful to you?