Image fields

An image field stores a string as its value, and a string as its text. Its value is the src of the image, while its text is an alt string describing/representing the image.

Image field

Image field on collapsed block



  "type": "example_image",
  "message0": "image: %1",
  "args0": [
      "type": "field_image",
      "src": "",
      "width": 15,
      "height": 15,
      "alt": "*"


Blockly.Blocks['example_image'] = {
  init: function() {
      .appendField(new Blockly.FieldImage(

The image constructor takes in:

Parameter Description
src A string that points to a raster image file.
width Must cast to a non-zero number.
height Must cast to a non-zero number.
opt_alt (Optional) A string that accurately describes/represents the image. If it is null or undefined an empty string will be used.
opt_onClick (Optional) A function to call when the field is clicked.
opt_flipRtl (Optional) A boolean. If true, the image is flipped across the vertical axis when in right-to-left mode. Defaults to false. Useful for "turn left" and "turn right" icons.

Serialization and XML

Image fields are not serializable, meaning they do not save to XML.

Click handler

The image field does not accept a validator; instead it explicitly accepts a function that is called whenever the field is clicked. This means that images can act like buttons that exist on blocks.

The on click handler can be set in the JavaScript Constructor or using the setOnClickHandler function.

Here is an example of an on click handler that collapses the block when called.

function() {