Tabris.js Widgets: ImageView

The widget is used for displaying an image. It will display an object of ImageValue data type that describes the image file URL and dimensions, or scale factor. Here is an example of ImageValue: {src: “http://example.com/catseye.jpg”, width: 100, height: 200}.

You can set a zoom level for the image and enable pinch-to-zoom mode. By setting a scale mode, you can fill a whole page with the image or stretch it.

Here is the minimal code required to create an ImageView in JS syntax:

And with JSX the same code will look like:

Just like tag in HTML, ImageView widget can be used as a button. Run the snippet below using QR code and click at the target image:

And here is a bit more complicated-looking example, demonstrating different scale modes for large and small images:

To ennable zoom for the image you should use the zoomEnabled attribute. Here is the simple use case:

Run the QR code below to see the advanced demonstration with the use of minZoomLevel and maxZoomLevel attributes. Check Tabris.js snippets repository, for more advanced examples.

To explore all the widget class properties and events, use the ImageView documentation page.