Displays the image from the provided URL on the screen.
Today's apps are not limited to text input boxes, text labels, buttons and dropdown menus, but are visual. You can add images to your apps, and even make them dynamic, responding to user interaction. An event handler must be created for each type of user interaction with an image using onEvent()
and the id. There are two ways to fill in the url string for the second parameter.
1. Copy the URL of an image on the web. In most browsers you can simply right-click (ctrl+click on a Mac) on an image and you'll see a menu with a few option. One will be to copy the URL of the image. You could also choose to view the image in its own window and just copy the URL from there.
2. Upload your own image to App Lab. You can upload images saved on your computer to your app in App Lab.
Found a bug in the documentation? Let us know at documentation@code.org
Click the button to change the character image on the screen from the dog to the bee and back again.
// Click the button to change the character image on the screen from the dog to the bee and back again. var dogURL="https://studio.code.org/blockly/media/skins/applab/static_avatar.png"; var beeURL="https://studio.code.org/blockly/media/skins/bee/static_avatar.png"; image("character", dogURL); button("changeButton", "Change Character"); onEvent("changeButton", "click", function(event) { var currentCharacterURL = getImageURL("character"); if (currentCharacterURL == dogURL) { setImageURL("character", beeURL); } else { setImageURL("character", dogURL); } });
// add the Code.org logo to the screen from the url image("logo", "http://code.org/images/logo.png");
image(id, url);
Name | Type | Required? | Description |
---|---|---|---|
id | string | The unique identifier for the image. The id is used for referencing the image in event handlers or other UI element modification functions. Must begin with a letter, contain no spaces, and may contain letters, digits, - and _. | |
url | string | The source URL (or filename for an uploaded file) of the image to be displayed on screen. |
No return value. Modifies screen only.
setImageURL()
, showElement()
, hideElement()
, deleteElement()
, setPosition()
, setSize()
.getImageURL()
, getXPosition()
, getYPosition()
.Found a bug in the documentation? Let us know at documentation@code.org