Stay organized with collections
Save and categorize content based on your preferences.
blockly > FieldImage
FieldImage class
Class for an image on a block.
Signature:
export declare class FieldImage extends Field<string>
Extends: Field<string>
Constructors
Properties
| Property |
Modifiers |
Type |
Description |
| EDITABLE |
readonly |
(not declared) |
Editable fields usually show some sort of UI indicating they are editable. This field should not. |
| imageElement |
protected |
SVGImageElement | null |
The rendered field's image element. |
| imageHeight |
protected
readonly
|
number |
|
| isDirty_ |
protected |
boolean |
Used to tell if the field needs to be rendered the next time the block is rendered. Image fields are statically sized, and only need to be rendered at initialization. |
Methods
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-07-24 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-24 UTC."],[[["\u003cp\u003e\u003ccode\u003eFieldImage\u003c/code\u003e is a Blockly class used to display images on blocks, extending the base \u003ccode\u003eField\u003c/code\u003e class for string values.\u003c/p\u003e\n"],["\u003cp\u003eThis class provides properties for managing the image source, size, alt text, and click behavior within the block editor.\u003c/p\u003e\n"],["\u003cp\u003eIt includes methods to initialize the image, update its properties, handle clicks, and control its appearance in right-to-left layouts.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003eFieldImage\u003c/code\u003e class enables developers to incorporate static, non-editable image elements into their custom Blockly blocks.\u003c/p\u003e\n"],["\u003cp\u003eAlthough editable fields often have UI elements indicating they are editable, this field does not.\u003c/p\u003e\n"]]],[],null,["[blockly](./blockly.md) \\\u003e [FieldImage](./blockly.fieldimage_class.md)\n\nFieldImage class\n----------------\n\nClass for an image on a block.\n\n**Signature:** \n\n export declare class FieldImage extends Field\u003cstring\u003e \n\n**Extends:** [Field](./blockly.field_class.md)\\\u003cstring\\\u003e\n\nConstructors\n------------\n\n| Constructor | Modifiers | Description |\n|-------------------------------------------------------------------------------------------------------------------------------|-----------|-----------------------------------------------------|\n| [(constructor)(src, width, height, alt, onClick, flipRtl, config)](./blockly.fieldimage_class._constructor__1_constructor.md) | | Constructs a new instance of the `FieldImage` class |\n\nProperties\n----------\n\n| Property | Modifiers | Type | Description |\n|---------------------------------------------------------------------|------------------------|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [EDITABLE](./blockly.fieldimage_class.editable_property.md) | `readonly` | (not declared) | Editable fields usually show some sort of UI indicating they are editable. This field should not. |\n| [imageElement](./blockly.fieldimage_class.imageelement_property.md) | `protected` | SVGImageElement \\| null | The rendered field's image element. |\n| [imageHeight](./blockly.fieldimage_class.imageheight_property.md) | `protected` `readonly` | number | |\n| [isDirty_](./blockly.fieldimage_class.isdirty__property.md) | `protected` | boolean | Used to tell if the field needs to be rendered the next time the block is rendered. Image fields are statically sized, and only need to be rendered at initialization. |\n\nMethods\n-------\n\n| Method | Modifiers | Description |\n|-------------------------------------------------------------------------------------------|-------------|-------------------------------------------------------------------------------------------------------------------|\n| [configure_(config)](./blockly.fieldimage_class.configure__1_method.md) | `protected` | Configure the field based on the given map of options. |\n| [doClassValidation_(newValue)](./blockly.fieldimage_class.doclassvalidation__1_method.md) | `protected` | Ensure that the input value (the source URL) is a string. |\n| [doValueUpdate_(newValue)](./blockly.fieldimage_class.dovalueupdate__1_method.md) | `protected` | Update the value of this image field, and update the displayed image. |\n| [getFlipRtl()](./blockly.fieldimage_class.getfliprtl_1_method.md) | | Get whether to flip this image in RTL |\n| [getText_()](./blockly.fieldimage_class.gettext__1_method.md) | `protected` | Use the `getText_` developer hook to override the field's text representation. Return the image alt text instead. |\n| [initView()](./blockly.fieldimage_class.initview_1_method.md) | | Create the block UI for this image. |\n| [isClickable()](./blockly.fieldimage_class.isclickable_1_method.md) | | Check whether this field should be clickable. |\n| [setAlt(alt)](./blockly.fieldimage_class.setalt_1_method.md) | | Set the alt text of this image. |\n| [setOnClickHandler(func)](./blockly.fieldimage_class.setonclickhandler_1_method.md) | | Set the function that is called when this image is clicked. |\n| [showEditor_()](./blockly.fieldimage_class.showeditor__1_method.md) | `protected` | If field click is called, and click handler defined, call the handler. |\n| [updateSize_()](./blockly.fieldimage_class.updatesize__1_method.md) | | |"]]
