From Xojo Documentation

You are currently browsing the old Xojo documentation site. Please visit the new Xojo documentation site!

For desktop applications, see ImageWell, Canvas.

Class (inherits from WebControl)

Displays a picture either from a project item, one assigned at runtime or via a URL.

Closed Opening PictureChanged

AlignHorizontal Name fa-lock-32.png ProtectImage
AlignVertical Page fa-lock-32.png URL
ControlID fa-lock-32.png Parent fa-lock-32.png
Enabled Picture

Close GotoURL
ExecuteJavaScript UpdateBrowser


The WebImageView appears as a rectangular area on a WebPage in the Web Page Layout Editor. If no image is assigned, then a placeholder icon is displayed in the center. If an image from your project is specified, it is shown in both the Layout Editor and the built application.

Manipulating the WebImageView Picture

You cannot directly manipulate the Picture property as it is actually a WebPicture, not a regular Picture object. What you must do instead is create a new Picture using the Picture property as the source, manipulate the new picture then assign it back to the Picture property to update it. The Picture property will automatically convert a WebPicture into a Picture and back again.

Here is an example:

Var p As Picture = WebImageView.Picture // Automatically converts WebPicture to Picture
p.Graphics.FillRect(0, 0, 32, 32) // Change the Picture
WebImageView.Picture = p // Automatically converts Picture to WebPicture

Optimizing Your Use of Pictures

Pictures that are stored in properties of objects that are sent to the browser (like properties of web pages and controls) are cached locally on the client web browser. If you are always displaying the same picture on a page (or different pages), you can significantly improve performance by caching your picture so that it is not repeatedly sent to the web browser.

For example, if you are creating a custom button control using a subclass of an ImageView control, you could store the two images (normal and pressed states) in two picture properties of the ImageView subclass so that those pictures are only sent to the browser once.

Pictures assigned to a WebImageView use both RAM and disk in the web browser, regardless of whether you assign the picture via an URL or with a WebPicture object.

On the app itself (the server side), using a URL does not keep the file in memory. Using a WebFile or WebPicture does keep the file in memory, unless you point it to a file on disk.

AlignVertical and AlignHorizontal Values

Use these class constants with the AlignVertical and AlignHorizontal properties.

Alignment Value
Default (middle) 0
Top 1
Middle 2
Bottom 3


This example displays a picture (FunnyCat) that has been added to your project:

ImageView1.Picture = FunnyCat

This example uses a WebTimer to rotate the displayed picture based on pictures in an array (which have been added to the project). The array is populated in the Open event handler of the web page:


The Timer is set with a period of 30000 so that it changes the picture every 30 seconds. This is the code in its Action event handler:

ImageView1.Picture = DisplayPictures(mPictureIndex)

mPictureIndex = mPictureIndex + 1 // A property of the web page

If mPictureIndex > DisplayPictures.LastRowIndex Then
mPictureIndex = 0 // Go back to the first picture
End If

See Also

Picture, WebLabel, WebPicture, WebCanvas, WebGraphics