Image

显示一张图片,图片根据 HTTP 缓存控制协议缓存到本地。

<Image title="NASA宇航员展示太空视角下的湾区毁灭性山火">https://static.cnbetacdn.com/thumb/article/2019/1031/c047d76e3c88a4f.jpg</Image>
属性名称说明是否支持变量默认值
标签内容图片地址。
title图片标题,覆盖图片显示,位置在图片的下方,文字左对齐,白色(默认白字配半透明黑底,防止有些图片颜色可能会和标题混在一起)。
titleBgColortitle 的背景。只有 title 有内容的时候,此字段有效。黑色半透明
width设置图片显示宽度。参考下面尺寸使用策略
height设置图片显示高度。参考下面尺寸使用策略
ratio图片宽高比(宽度除以高度)。参考下面尺寸使用策略
rawURL原图地址。指定了 rawURL 属性的图片点击的时候可以全屏查看,并且可以保存到本地相册。如果没有原图又想使用此功能,只需要设置 rawURL=”@",表示 rawURL 与图片的 URL 保持一致。
borderRadius设置图片圆角半径(暂不支持椭圆)

尺寸与比例设置

  • widthheightratio 三个属性填写其中两个即可确定图片尺寸,如果都填,忽略 ratio 属性;
  • 如果只填了 width,那么 height 默认设置 200 高度;
  • 如果只填了 height,那么 width 默认填满能占用的宽度;
  • 如果只填了 ratio,那么 width 默认填满能占用的宽度,以此计算出 height
  • 如果都没填,那么 width 默认填满能占用的宽度,height 默认设置 200 高度;

示例

<Divider padding="- 20">width = {{w}} & height = {{h}}</Divider>
<Image width="{{w}}" height="{{h}}">{{src}}</Image>
<Divider padding="- 20">width = {{w}} & ratio = {{r50}}</Divider>
<Image width="{{w}}" ratio="{{r50}}">{{src}}</Image>
<Divider padding="- 20">height = {{h}} & ratio = {{r300}}</Divider>
<Image ratio="{{r300}}" height="{{h}}">{{src}}</Image>
<Divider padding="- 20">width = {{w}}</Divider>
<Image width="{{w}}">{{src}}</Image>
<Divider padding="- 20">height = {{h}}</Divider>
<Image height="{{h}}">{{src}}</Image>
<Divider padding="- 20">ratio = 1</Divider>
<Image ratio="{{r100}}">{{src}}</Image>
<Divider padding="- 20">None</Divider>
<Image>{{src}}</Image>
<Divider padding="- 20">原始比例 ratio = {{r150}}</Divider>
<Image ratio="{{r150}}">{{src}}</Image>
{
    "src": "https://cdn.pixabay.com/photo/2019/10/28/16/49/fuchs-4584929_960_720.jpg",
    "w": 100,
    "h": 100,
    "r50": 0.5,
    "r100": 1,
    "r150": 1.5,
    "r300": 3
}
查看渲染结果

圆角边框(裁剪为圆角)设置规则

borderRadius 支持分别设置四个角,顺序是"左上角 右上角 右下角 左下角”,与 CSS 规则类似(除了不支持椭圆圆角)

分别设置 4 个角
<Image borderRadius="5 10 15 20">{{src}}</Image>
一次设置 4 个角为相同的值,等价于 "5 5 5 5"
<Image borderRadius="5">{{src}}</Image>
分别设置对角(左上和右下一样,右上和左下一样),等价于 "5 10 5 10"
<Image borderRadius="5 10">{{src}}</Image>
分别设置左上、右上、右下,左下默认与右上角一样),等价于 "5 10 15 10"
<Image borderRadius="5 10 15">{{src}}</Image>