Image

The Image tag shows an image on the page. Use for all image annotation tasks to display an image on the labeling interface.

Use with the following data types: images.

When you annotate image regions with this tag, the annotations are saved as percentages of the original size of the image, from 0-100.

Parameters

Param Type Default Description
name string Name of the element
value string Data field containing a path or URL to the image
[smoothing] boolean Enable smoothing, by default it uses user settings
[width] string "100%" Image width
[maxWidth] string "750px" Maximum image width
[zoom] boolean false Enable zooming an image with the mouse wheel
[negativeZoom] boolean false Enable zooming out an image
[zoomBy] float 1.1 Scale factor
[grid] boolean false Whether to show a grid
[gridSize] number 30 Specify size of the grid
[gridColor] string ""#EEEEF4"" Color of the grid in hex, opacity is 0.15
[zoomControl] boolean false Show zoom controls in toolbar
[brightnessControl] boolean false Show brightness control in toolbar
[contrastControl] boolean false Show contrast control in toolbar
[rotateControl] boolean false Show rotate control in toolbar
[crosshair] boolean false Show crosshair cursor
[horizontalAlignment] string ""left"" Where to align image horizontally. Can be one of “left”, “center” or “right”
[verticalAlignment] string ""top"" Where to align image vertically. Can be one of “top”, “center” or “bottom”
[defaultZoom] string ""fit"" Specify the initial zoom of the image within the viewport while preserving it’s ratio. Can be one of “auto”, “original” or “fit”
[crossOrigin] string ""none"" Configures CORS cross domain behavior for this image, either “none”, “anonymous”, or “use-credentials”, similar to DOM img crossOrigin property.

Example

Labeling configuration to display an image on the labeling interface

<View>
  <!-- Retrieve the image url from the url field in JSON or column in CSV -->
  <Image name="image" value="$url" rotateControl="true" zoomControl="true"></Image>
</View>