图片展示/交互

组件 ID: image

这是一个标准的 SunForm 展示/交互组件，支持可视化配置与低代码生成。

JSON 配置示例

直接复制以下 JSON 到配置文件中即可使用。

{
  "type": "image",
  "props": {
    "value": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "width": "100%",
    "height": "auto",
    "model": "scaleToFill",
    "preview": true,
    "ratio": 1.25,
    "round": "0",
    "iconSize": "36",
    "placeBgColor": "#F5F5F5",
    "placeDarkBgColor": "",
    "fadeShow": false,
    "webp": false,
    "lazy": true,
    "draggable": false,
    "showMenuByLongpress": false,
    "remark": ""
  }
}

属性配置 (Props)

属性名	类型	默认值	说明
`width`	string	100%	宽度
`height`	string	auto	高度
`value`	string	https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg	表单值 / 绑定值
`model`	string	scaleToFill	暂无描述
`preview`	boolean	true	暂无描述
`ratio`	number	1.25	暂无描述
`round`	string	0	暂无描述
`iconSize`	string	36	图标
`placeBgColor`	string	#F5F5F5	颜色值
`placeDarkBgColor`	string	-	颜色值
`fadeShow`	boolean	false	暂无描述
`webp`	boolean	false	暂无描述
`lazy`	boolean	true	暂无描述
`draggable`	boolean	false	暂无描述
`showMenuByLongpress`	boolean	false	暂无描述
`remark`	string	-	组件备注/说明
`hide`	boolean	false	是否隐藏该组件
`style`	object	{}	自定义内联样式 CSS
`onCreated`	any	null	组件创建时触发的事件
`onMounted`	any	null	组件挂载后触发的事件
`onClick`	any	null	点击组件触发的事件

图片 展示/交互

JSON 配置示例

属性配置 (Props)

图片展示/交互