# 图片与数据展示

| 方法 | 返回值与参数 |
| --- | --- |
| `image(src, alt = "")` | img.lo-image；提供图片来源和替代文字。 |
| `avatar(text, src?)` | span.lo-avatar；没有图片时显示文字的首个字符，有图片时使用 text 作为替代文字。 |
| `stat(label, value)` | div.lo-stat；组合说明标签和带数字字体的统计值。 |
| `mark(text)` | span.lo-mark；小型贴纸标记，适合短文字。 |

```js preview height=340
export default function render(root, platform) {
  const ui = platform.ui;
  const illustration = "data:image/svg+xml," + encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="320" height="80"><rect width="320" height="80" rx="20" fill="#ebe4f4"/><circle cx="160" cy="40" r="22" fill="#b79ddb"/></svg>'
  );
  root.replaceChildren(ui.page([ui.card(ui.stack([
    ui.header("今日概览", ui.avatar("林")),
    ui.stat("完成事项", "8"),
    ui.image(illustration, "紫色圆形示意图"),
    ui.mark("记"),
  ]))]));
}
```

`stat` 不会自动格式化金额、单位或小数位，请在传入之前处理，例如 `amount.toFixed(2) + " 元"`。

当前没有文件选择、相册、图片上传或宿主文件 API。示例使用内嵌 data URL，不需要外部图片请求。不要因为存在 `image` 组件，就假设相机或远程图片下载能力已经开放。