研究调查问卷:请告诉我们您使用 Blockly 的体验
开始调查问卷
图片字段
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
图片字段会将字符串作为其值存储,并将字符串作为其文本存储。其值是图片的 src,而文本是用于描述/表示图片的 alt 字符串。
图片字段

收起的版块上的图片字段

创建
JSON
{
"type": "example_image",
"message0": "image: %1",
"args0": [
{
"type": "field_image",
"src": "https://www.gstatic.com/codesite/ph/images/star_on.gif",
"width": 15,
"height": 15,
"alt": "*"
}
]
}
JavaScript
Blockly.Blocks['example_image'] = {
init: function() {
this.appendDummyInput()
.appendField("image:")
.appendField(new Blockly.FieldImage(
"https://www.gstatic.com/codesite/ph/images/star_on.gif",
15,
15,
"*"));
}
};
图片构造函数接受以下内容:
参数 |
说明 |
src |
指向光栅图片文件的字符串。 |
width |
必须转换为非零数。 |
height |
必须转换为非零数。 |
opt_alt |
(可选)准确描述/表示图片的字符串。当块收起时,系统会使用此文字,而不是图片。如果为 null 或 undefined ,则使用空字符串。 |
opt_onClick |
(可选)在用户点击该字段时调用的函数。 |
opt_flipRtl |
(可选)布尔值。如果为 true ,则在从右到左模式下,图片会沿垂直轴翻转。默认值为 false 。适用于“向左转”和“向右转”图标。 |
序列化
图片字段不可序列化。
点击处理程序
图片字段不接受验证器;而是明确接受一个函数,该函数会在每次点击该字段时被调用。这意味着图片可以像块上存在的按钮一样。
点击处理脚本可以在 JavaScript 构造函数中设置,也可以使用 setOnClickHandler 函数设置。
以下是一个点击处理脚本示例,该脚本会在被调用时收起该块。
function() {
this.getSourceBlock().setCollapsed(true);
}

如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-06-17。
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2025-06-17。"],[[["Image fields in Blockly store image source (src) as their value and alternative text (alt) for accessibility."],["They are created using the `Blockly.FieldImage` constructor in JavaScript, requiring src, width, and height parameters."],["Image fields are not serializable and cannot be stored directly in block data."],["They can function as buttons using an optional onClick handler to trigger actions like collapsing the block."]]],["An image field's value is the image's `src` URL, and its text is the `alt` string. Key actions include: specifying the `src`, `width`, `height`, and optional `alt` and `onClick` parameters during creation. The `onClick` function enables images to act as buttons. The `opt_flipRtl` parameter is used to mirror the image. The field is constructed through JSON or JavaScript. Image fields are not serializable. The `setOnClickHandler` function can also be used to set the `onClick` function.\n"]]