`<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
`decorative = "…"`	boolean	`"true"` `"false"`
`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.decorative`	boolean
`$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.shortDescription`	text
`$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. If a description is not supplied and decorative is not supplied, a warning is produced.

Attribute Example: decorative

If decorative is specified, it indicates that the image doesn’t add any information to the content of the page and can be ignored by assistive technologies like screen readers.

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