Native image viewer with pan/zoom

Category: Widgets
Subcategory: Mobile


Native image viewer with pan/zoom



View images, with zoom and pan


  • Shows the image full screen
  • Allows zooming and panning
  • Tap image to close viewer
  • Image source can be Mendix image, base64 encoded data URL or a local file on the device

Image width / height

Widget needs the image width/height. For images created in the backend, use CommunityCommons.GetImageDimensions. For images taken in the native app, use the TakePictureAdvanced JavaScript action, which returns the dimensions in the ImageMetaData object.


  • Place widget on a page, preferably with a full page layout and no other content.
  • Configure a close action, usually just Close page is sufficient.

Please note that the widget assumes to show the image fullscreen, so use a fullpage layout and take out any spacing.

The intended use of this widget is to show it without any other content on the page.

It is possible to put other content, like a header or footer, on the page, these will overlay the image.

Data URL

For base64 encoded image data, the data must have the data URL prefix, where <ext> is the image format, like jpg or png:

data:image/<ext>;base64,<base64 data>

(Do not include the < > in the data.)


Version: 3.1.1
Framework Version: 9.18.0
Release Notes: Fix initial zoom ratio, was visible in landscape mode where image was shown partially zoomed in with no possibility to zoom out.
Version: 3.1.0
Framework Version: 9.18.0
Release Notes: Added support for file or data URL
Version: 3.0.0
Framework Version: 9.11.1
Release Notes: Replaced the pan/zoom function with another library as the one used up to now is no longer maintained.
Version: 2.1.0
Framework Version: 9.6.9
Release Notes: Mendix 9.6, new icons, tested with Atlas 3
Version: 2.0.0
Framework Version: 9.0.2
Release Notes: Mx9 release. Allow to open image viewer directly now as this works correctly now