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",
    ]
  }
} -->

Image

Parameters

Example

Example

In this article