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
url string The source URL (or filename for an uploaded file) of the image to be displayed on screen.
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 _.

Returns

No return value. Modifies screen only.

Tips

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