组件：图片框

图片框组件用于展示图片内容，支持设置图片、替代文本、图片宽度、图片高度、图片显示模式、置图片加载错误回调等特性，常用于头像展示、图片预览、图文混排等场景，支持自动处理 static 目录路径。

典型使用场景：

• 用户头像展示（个人资料页、评论列表、用户信息卡）
• 产品图片展示（电商产品图、商品详情、相册展示）
• 文章配图（博客文章配图、新闻图片、内容插图）
• 图标展示（应用图标、功能图标、品牌标识）
• 图片预览（缩略图预览、图片放大、图片轮播）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

样式美化参考

图片样式变体：

• 圆角图片：边框圆角 = "50%"，边框 = "2px solid #d9d9d9"，宽度 = 80，高度 = 80
• 方形图片：边框圆角 = "4px"，边框 = "1px solid #e8e8e8"，宽度 = 120，高度 = 120
• 卡片图片：边框 = "none"，边框圆角 = "8px"，阴影 = "0 2px 8px rgba(0,0,0,0.1)"，宽度 = 200，高度 = 150

显示模式样式：

• 覆盖模式：显示模式 = "覆盖"，对象适配 = "覆盖"，背景颜色 = "#f0f0f0"
• 包含模式：显示模式 = "包含"，对象适配 = "包含"，背景颜色 = "#ffffff"
• 拉伸模式：显示模式 = "拉伸"，对象适配 = "拉伸"，背景颜色 = "#ffffff"
• 重复模式：显示模式 = "重复"，对象适配 = "重复"，背景颜色 = "#ffffff"

状态样式：

• 正常状态：边框 = "1px solid #d9d9d9"，边框圆角 = "4px"，背景颜色 = "#ffffff"
• 悬停状态：边框 = "1px solid #1890ff"，边框圆角 = "4px"，背景颜色 = "#f0f7ff"
• 加载状态：背景颜色 = "#f5f5f5"，边框 = "1px solid #d9d9d9"，边框圆角 = "4px"
• 错误状态：背景颜色 = "#fff2f0"，边框 = "1px solid #ffccc7"，边框圆角 = "4px"

尺寸样式：

• 小尺寸：宽度 = 40，高度 = 40，图片宽度 = 40，图片高度 = 40
• 中尺寸：宽度 = 80，高度 = 80，图片宽度 = 80，图片高度 = 80
• 大尺寸：宽度 = 120，高度 = 120，图片宽度 = 120，图片高度 = 120
• 自定义尺寸：宽度 = 200，高度 = 150，图片宽度 = 200，图片高度 = 150

响应式样式：

• 自适应宽度：宽度 = "100%"，高度 = "自动"，最大宽度 = 400，最大高度 = 300
• 固定比例：宽度 = 300，高度 = 200，对象适配 = "包含"，显示模式 = "包含"
• 流式布局：宽度 = "100%"，高度 = 200，外边距 = "10px 0"，边框圆角 = "8px"

示例代码

' 示例：完整的图片框使用演示
' 1. 创建图片框
变量 图片框1 = 创建 图片框()
' 2. 设置属性
图片框1.左边 = 100
图片框1.顶边 = 100
图片框1.图片宽度 = 240
图片框1.图片高度 = 160
图片框1.图片显示模式 = "cover"
图片框1.图片 = "static/banner.jpg"
图片框1.替代文本 = "横幅图片"
' 3. 设置事件回调
图片框1.置图片加载错误回调((源对象, 事件源) => {
	调试输出("图片加载失败")
})
' 4. 添加到父容器
添加组件(图片框1)

属性：替代文本

• 类型： 文本型
• 说明： 设置或获取当前图片的替代文本内容，当图片无法正常显示时，该文本会替代图片显示，用于描述图片信息。

属性：图片

• 类型： 文本型
• 说明： 设置或获取当前图片框所显示图片的源地址，支持URL网络地址、本地静态文件地址。

属性：图片高度

• 类型： 数值型
• 说明： 设置或获取当前图片显示的高度。

属性：图片宽度

• 类型： 数值型
• 说明： 设置或获取当前图片显示的宽度。

属性：图片显示模式

• 类型： 文本型
• 说明： 设置或获取当前图片的显示模式，例如 'contain'、'cover' 等，用于控制图片在图片框内的显示方式。

函数：置图片加载错误回调(回调函数)

设置当图片加载失败时回调的函数对象。

事件：图片加载错误(源对象,事件源)

当图片加载失败时触发并回调该事件。