Campos de imagen

Un campo de imagen almacena una cadena como su valor y una cadena como su texto. Su valor es el src de la imagen, mientras que su texto es una cadena alt que describe o representa la imagen.

Campo de imagen

Campo de imagen en un bloque contraído

Creación

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,
        "*"));
  }
};

El constructor de imágenes toma los siguientes parámetros:

Parámetro	Descripción
src	Es una cadena que apunta a un archivo de imagen ráster.
width	Se debe convertir a un número distinto de cero.
height	Se debe convertir a un número distinto de cero.
opt_alt	(Opcional) Es una cadena que describe o representa con precisión la imagen. Se usa en lugar de la imagen cuando el bloque está contraído. Si es null o undefined, se usará una cadena vacía.
opt_onClick	(Opcional) Función que se llamará cuando se haga clic en el campo.
opt_flipRtl	(Opcional) Es un valor booleano. Si es true, la imagen se gira sobre el eje vertical cuando está en modo de derecha a izquierda. La configuración predeterminada es false. Es útil para los íconos de "girar a la izquierda" y "girar a la derecha".

Serialización

Los campos de imagen no se pueden serializar.

Controlador de clics

Nota: Para obtener información sobre los validadores en general, consulta Validadores.

El campo de imagen no acepta un validador, sino que acepta explícitamente una función que se llama cada vez que se hace clic en el campo. Esto significa que las imágenes pueden actuar como botones que existen en los bloques.

El controlador onclick se puede configurar en el constructor de JavaScript o con la función setOnClickHandler.

A continuación, se muestra un ejemplo de un controlador onclick que contrae el bloque cuando se llama.

function() {
    this.getSourceBlock().setCollapsed(true);
}