Native base64 encoded image viewer

Category: Widgets
Subcategory: Images

Overview

Many native libraries produce image data in base64 encoded format, for example signature components. This widget can display such images.

Documentation

Demo url

NativeEncodedImageViewer

View images from base64 encoded image data.

Usage

data value

The widget can show base64 encoded images with or without the data:image prefix. If the prefix is not found, it is determined from the file name. If you are sure the encoded data has the prefix, you do not need to set the file name attribute.

Image dimensions

The widget can use the actual image dimensions or a fixed view width/height. Set the width and height of the image on the widget.

Resize mode

The available resize modes are the ones React Native provides:

  • Cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
  • Contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
  • Stretch: Scale width and height independently, This may change the aspect ratio of the src.
  • Repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.
  • Center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

Configure widget dimensions

By default the widget will attempt to display the image fully. If the image is wider than the available space, the image is resized to match the available space, retaining aspect ratio.

The width and height can also be configured.

Set width and height to maximum size for the resize options to have the most effect.

When used in a list, it is advisable to use a fixed width and height.

Width options:

  • Image size: The default, see above, requires image width/height attribute
  • Maximum size: The maximum available width is used
  • Fixed: Enter a fixed width.

Height options:

  • Image size: The default, see above
  • Square: Square, defines a square box where height matches the width used. Useful in lists.
  • Maximum size: The maximum available height is used
  • Fixed: Enter a fixed height.

Releases

Version: 2.3.0
Framework Version: 9.6.0
Release Notes: Name and image width/height are now optional to support use cases where only the base64 encoded data is available. To omit the file name, the image data must have a data prefix.
Version: 2.2.0
Framework Version: 9.6.0
Release Notes: Mendix 9.6, new icons, tested with Atlas 3
Version: 2.1.0
Framework Version: 9.4.0
Release Notes: Tested against Mendix 9.4 and Atlas 3, no functional changes
Version: 2.0.0
Framework Version: 9.0.2
Release Notes: Mx9 release.
Version: 1.0.0
Framework Version: 8.15.1
Release Notes: Initial release