Skip to content
Docs
Components
Image

Image

Latest Update:Jul 20, 2023, 15:52:34

Scenarios

Used to display the image in pages.

Basic Function Description

  • Basic Properties Provides options for selecting an image or entering its URL.Allows configuring the layout mode, with the default being auto-adaptive height for better multi-platform image display.Click to Preview Large Image: Enables the configuration for clicking to preview a larger image.
  • Advanced Properties Allows setting alternative text for the image (the "alt" attribute of the img tag).Provides a switch for enabling lazy loading. Lazy loading is especially useful for pages with many images, as it can reduce the loading of unnecessary resources.

Extend Scenarios Description

How to choose the layout mode of fixed height and fixed width image?

Example:

How to choose the layout of image provided by designer with a width of 300 and height of 150?

Configution method

In the "Style" section, set the width and height according to the values provided in the design. In the "Basic Properties" section, for the "Layout Mode," you can choose either "Stretch to Fill" or "Crop to Fill."