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
[valueList] string References a variable that holds a list of image URLs
[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] left | center | right left Where to align image horizontally. Can be one of “left”, “center”, or “right”
[verticalAlignment] top | center | bottom top Where to align image vertically. Can be one of “top”, “center”, or “bottom”
[defaultZoom] auto | original | fit fit Specify the initial zoom of the image within the viewport while preserving its ratio. Can be one of “auto”, “original”, or “fit”
[crossOrigin] none | anonymous | use-credentials 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>

Example

Labeling configuration to perform multi-image segmentation

<View>
  <!-- Retrieve the image url from the url field in JSON or column in CSV -->
  <Image name="image" valueList="$images" rotateControl="true" zoomControl="true"></Image>
</View>
<!-- {
  "data": {
    "images": [
      "https://images.unsplash.com/photo-1556740734-7f3a7d7f0f9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
      "https://images.unsplash.com/photo-1556740734-7f3a7d7f0f9c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
    ]
  }
} -->
Try Enterprise Cloud for free Get Started