工作室组件类型与属性
图片组件
图片组件的属性配置与使用技巧
图片组件是 Adseed 中最常用的组件类型，用于在画布上展示静态图像。支持多种主流图片格式，适用于背景、按钮、产品展示、装饰元素等各种场景。
支持的图片格式
| 格式 | 特点 | 适用场景 |
|---|---|---|
| JPG | 文件体积小，不支持透明背景 | 照片、背景图、大面积图像 |
| PNG | 支持透明背景，文件较大 | 按钮、图标、需要透明度的元素 |
| GIF | 支持简单动画，色彩有限 | 简单动效、表情 |
| WebP | 现代格式，体积小且支持透明 | 追求性能的场景 |
组件属性
选中图片组件后，右侧属性面板会显示以下专属属性（通用属性请参考组件概览）：
| 属性 | 说明 | 默认值 |
|---|---|---|
| 图片来源 | 从素材库拖入或选择的图片文件 | 无 |
| 手指跟随 | 开启后图片跟随用户的触摸/鼠标位置移动，可用于制作拖拽效果 | 关 |
| 多语言配置 | 为不同语言版本设置不同的图片，实现多语言适配 | 无 |
使用场景
页面背景
将一张全屏尺寸的图片放置在画布上，设置为最底层（层叠顺序最小），即可作为页面背景使用。
按钮与图标
使用带透明背景的 PNG 图片作为按钮或图标，配合事件系统添加点击交互，实现可点击的按钮效果。
产品展示
将产品图片放置在画布上，通过调整位置和大小进行排版。可以配合文本组件添加产品描述。
装饰元素
各种装饰性图案、边框、分隔线等都可以使用图片组件实现。
使用 PNG 格式的图片可以保留透明背景，非常适合需要与其他组件叠加显示的场景。例如将一个带透明背景的按钮图标叠放在背景图上方。
图片优化建议
为了确保作品加载速度，建议注意以下几点：
- 单张图片文件大小尽量控制在 1MB 以内
- 图片尺寸与实际显示尺寸保持一致，避免使用过大的原图缩小显示
- 不需要透明背景时优先使用 JPG 格式，文件体积更小
- 对于装饰性小图标，建议使用 WebP 格式以获得最佳的体积与质量平衡
过大的图片文件会显著影响作品的加载速度，尤其在移动设备上。建议在上传前对图片进行适当压缩。
多语言配置
如果您的作品需要支持多种语言，可以为图片组件设置不同语言下显示不同的图片（例如含有文字的按钮图片）。
选中图片组件
在画布上点击要配置多语言的图片组件，右侧属性面板将显示该组件的属性。
打开多语言设置
在属性面板中找到 多语言配置 选项，点击展开多语言设置面板。
上传各语言版本图片
为每种需要支持的语言上传对应的图片版本。系统会根据用户的语言环境自动切换显示对应的图片。
添加交互
图片组件本身是静态的，但通过事件系统可以让它具备丰富的交互能力：
- 点击跳转 — 点击图片后跳转到其他页面
- 点击播放 — 点击图片后触发视频或音频播放
- 拖拽交互 — 开启手指跟随，配合碰撞检测实现拖拽到指定区域的判定
- 显示/隐藏 — 通过事件控制图片的显示和隐藏，实现切换效果
更多交互配置请参考事件系统。
这个页面有帮助吗？