`<image/>`

<image/> is a Sectional component that renders an image from a hyperlink or an uploaded file.

Attributes and Properties

Attributes for `<image>`
Attribute	Type	Values
`anchor = "…"`	point
`asFileName = "…"`	text
`aspectRatio = "…"`	number
`description = "…"`	text
`displayMode = "…"`	text	`"block"` `"inline"`
`draggable = "…"`	boolean	`"true"` `"false"`
`horizontalAlign = "…"`	text	`"center"` `"left"` `"right"`
`layer = "…"`	number
`mimeType = "…"`	text
`positionFromAnchor = "…"`	text	`"upperright"` `"upperleft"` `"lowerright"` `"lowerleft"` `"top"` `"bottom"` `"left"` `"right"` `"center"`
`rotate = "…"`	number
`size = "…"`	text	`"tiny"` `"small"` `"medium"` `"large"` `"full"`
`source = "…"`	text
`width = "…"`	componentSize

Props for `<image name="i">`
Property	Type
`$i.anchor`	point
`$i.asFileName`	text
`$i.aspectRatio`	number
`$i.description`	text
`$i.disabled`	boolean
`$i.displayMode`	text
`$i.draggable`	boolean
`$i.fixed`	boolean
`$i.fixLocation`	boolean
`$i.hidden`	boolean
`$i.horizontalAlign`	text
`$i.layer`	number
`$i.mimeType`	text
`$i.positionFromAnchor`	text
`$i.rotate`	number
`$i.size`	text
`$i.source`	text
`$i.width`	componentSize

Example: `<image/>` from a hyperlink

An <image/> may be inserted from a hyperlink using the source attribute. The description attribute is required for accessibility.

Example: `<image/>` in a `<figure>`

An <image/> is often nested within a <figure> along with a <caption>. The description attribute is required for accessibility.

Example: `<image/>` on a `<graph>`

An <image/> can be placed on a <graph>. Control the size of the image with the size attribute and its initial position with the anchor attribute.

Attribute Example: width

The width attribute specifies the absolute width of the image. Doenet determines the size category corresponds to that width and sizes the image accordingly.

Attribute Example: size

The size attribute specifies one of 5 size categories for the <image/>: tiny, small, medium, large, or full.

Attribute Example: aspectRatio

The aspectRatio attribute allows for customization of the image’s default proportions.

Attribute Example: displayMode

The displayMode attribute affects how the <image/> is positioned on screen. The default mode is “block”, which renders the image centered on screen. The available modes are inline, and block.

Attribute Example: horizontalAlign

The horizontalAlign attribute specifies the horizontal position on-screen for the default block-mode style image. Valid values are left, center, and right, with a default of center.

Attribute Example: description

The description attribute provides a description of the <image/> for situations where the image cannot load, or for use with screen-reading technology. It is a required attribute for accessibility.

Attribute Example: source

The source attribute specifies the url for a hyperlinked <image/> and the filepath for an uploaded <image/>.

Attribute Example: anchor

The anchor attribute positions the <image/> on a <graph>.

Attribute Example: draggable

The draggable attribute determines whether the <image/> can be dragged around the graph.

Attribute Example: layer

By adjusting the layer attribute number, geometry can be placed in front of or behind other geometry. The default layer number is 0; all higher numbers are placed in front.

Attribute Example: rotate

The rotate attribute allows for rotation of the <image> about its centerpoint.

Property Example: Attributes as properties 1

The above listed <image/> attributes are also accessible as properties.

Property Example: Attributes as properties 2