圖片欄位

圖片欄位會將字串儲存為值，並將字串儲存為文字。值是圖片的 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);
}