image

Category:UI Controls

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.

Click the pulldown arrow in the image URL field and then click "Choose..."
Then click the "Upload File" button the in the window.
Then choose the file from your computer by navigating to it
Once its uploaded click "Choose" next to it. This will insert the name of the file into the URL field. Because you have uploaded it, it doesn't need to be an HTTP reference.

Found a bug in the documentation? Let us know at documentation@code.org

Examples

Example Image Changer

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

Syntax

image(id, url);

Parameters

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.

Returns

No return value. Modifies screen only.

Tips

Image URL requires the full http:// prefix.
If there is another UI element at location (0,0) the image is placed at the next available position to the right or below.
There are various UI element modification functions available: setImageURL(), showElement(), hideElement(), deleteElement(), setPosition(), setSize().
There are various UI element query functions available: getImageURL(), getXPosition(), getYPosition().
Images can also be created and initialized in Design mode.

Found a bug in the documentation? Let us know at documentation@code.org