图片链接

图片链接用于在页面上放置一张可点击的小图：既显示图片，又能在访客点击后跳转到指定页面。

适合图标、角标、单独切出来的按钮图等，不必先做整层背景再叠透明热区。

从左侧 「基础」 拖入 「图片链接」，摆到目标位置后，在右侧设置图片与跳转地址即可。也常放在「图片背景容器」里，叠在大背景上的独立图标或按钮图上。

组件能做什么

• 图 + 链接一体：一张图就是一个可点区域，线上直接显示该图。
• 自动对齐尺寸：选好图片后，会按图片大小自动调整宽高，也可手动修改链接宽度、高度。
• 支持店铺链接：链接地址可用链接选择器从店铺页面里选取。
• 可叠加多个：同一楼层可放多张图片链接，分别指向不同页面。
• 点击新窗口打开：发布后点击默认在新标签页打开（与热区组件可勾选不同）。

设置项说明

位置与大小

除上表外，还可在画布上拖动组件，或在样式里设置左边距、上边距、宽度、高度，与背景图上的设计位置对齐。

常见用法

背景图上的独立图标

大背景用「图片背景容器」，角标、浮动按钮等用「图片链接」单独上图并设链接，比透明热区更直观。

级联、Tab 等小图入口

部分 Tab、分类条会用到小图标作为可点入口，适合用图片链接单独维护图与跳转。

注意事项

• 先选图再调位置：未设图片时编辑器里可能是蓝色占位框，线上也可能点不到或看不见。
• 宽高与切图一致：图片被拉伸时，检查链接宽度、高度是否与切图尺寸一致。
• 链接务必填写：未改链接时可能是示例地址，保存前请在预览里点击测试。
• 建议放在容器内：与背景楼层一起用时，拖进「图片背景容器」内，避免定位基准错误。
• 与热区二选一：背景上已有按钮图案且不需单独上图时，用「热区」即可；需要单独换一张图或图标时用「图片链接」。

推荐操作顺序

1. 拖入「图片链接」到目标位置（或在背景容器内添加）；
2. 设置「图片地址」；
3. 微调位置、链接宽度与高度；
4. 填写「链接地址」；
5. 预览点击是否正常，保存并发布。

如有疑问，可结合「图片背景容器」「热区组件」文档一起查看。