圖片欄位

圖片欄位會將字串儲存為值，並將字串儲存為文字。這個值是圖片的 src，但其文字是說明/呈現圖片的替代字串。

圖片欄位

收合區塊中的圖片欄位

創作風潮

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);
}