Image​

Image 组件，可用于展示商品图片。

预览​

示例代码​

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​

source​

图片路径。

accessibilityDescription?​

为屏幕阅读器提供的详细描述文本，帮助视障客户理解 UI 组件的功能或状态。

fit?​

• contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个图片在填充盒子的同时保留其长宽比。
• cover：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果图片的宽高比与内容框不相匹配，该图片将被剪裁以适应内容框。

loading?​

• eager：图片加载方式，该配置下图片将立即加载。
• lazy：图片加载方式，该配置下图片将延迟加载。

aspectRatio?​

设置图片比例，如配置值为 2，则图片会进行压缩，表现为 calc(50%)。如配置值为 0.5，则图片会进行放大，表现为 calc(200%)。

viewportSize?​

• small：图片宽高为 80px。
• medium：图片宽高为 200px。
• large：图片宽高为 400px。

• 百分比：1%~100%
• 像素值：任意值（例如 200px）

border?​

是否有边框，当为 true 时表示有表框，当为 false 时表示无表框。

accessibilityRole?​

设置组件内容的语义含义。设置后，辅助技术（如屏幕阅读器）将使用 ARIA 角色 来帮助客户浏览页面。