Image_图像

SugarCube 的图像标记不仅支持静态图片的展示，还能将其作为交互按钮使用。一个完整的图像标记由必需的图像路径（Image），以及可选的标题（Title）、目标链接（Link）和设置器（Setter）组成。

组件深度解析

• 图像路径 (Image)：必需组件。可以是本地/远程 URL，也可以是 Twine 内嵌的媒体段落标题。支持 TwineScript 表达式求值。
• 标题 (Title)：可选组件。其值将作为图像的 alt 属性（替代文本）使用。
• 目标链接 (Link)：可选组件。设置后图像将变为可点击状态，跳转至指定片段或外部 URL。
• 设置器 (Setter)：仅限片段链接使用。点击图像时执行的表达式，逻辑与 <<set>> 宏一致，多条语句需用分号 ; 分隔。

灵活的分隔符

除了标准的管道符 |，图像标记同样支持方向箭头：

• 右箭头：[img[标题->路径]]（指向路径）。
• 左箭头：[img[路径<-标题]]（指向路径）。

Twine 2 兼容性注意： 若在链接组件（Link）中使用表达式，Twine 2 可能会误创多余片段。如遇此类情况，专业开发者通常会选择改用 <<link>> 宏包裹图像标签的方案。

语法速查表

功能描述	语法结构	典型应用
基础显示	[img[路径]]	[img[home.png]]
带链接图像	[img[路径][目标]]	[img[icon.png][Setting]]
交互式图像	[img[路径][目标][设置]]	[img[btn.png][Shop][$gold -= 10]]
带描述图像	[img[标题|路径]]	[img[角色头像|hero.png]]
全功能组合	[img[标题|路径][目标][设置]]	[img[$alt|$path][Next][$step++]]

在 CSS 中引用

这是一个非常强大的特性：SugarCube 允许在样式表中直接使用图像标记来替代标准的 url() 语法。这意味着你可以轻松引用内嵌在 Twine 中的图像资源。

/* 设置背景为外部或本地图片文件 */
body {
	background-image: [img[background.png]];
}

/* 引用 Twine 内嵌的媒体段落资源 */
.header {
	background-image: [img[logo_asset]];
}