`<image/>`

Displays a static image

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

Attributes and Properties

Attributes for `<image>`

Positioning (2)

anchor

point. Default value: $\left( 0, 0 \right)$. Coordinates of the anchor point used to position this component on a graph.

positionFromAnchor

keyword. Where this component sits relative to its anchor point.

Value	Description
`upperRight`	Place the component above and to the right of the anchor point.
`upperLeft`	Place the component above and to the left of the anchor point.
`lowerRight`	Place the component below and to the right of the anchor point.
`lowerLeft`	Place the component below and to the left of the anchor point.
`top`	Place the component directly above the anchor point.
`bottom`	Place the component directly below the anchor point.
`left`	Place the component directly to the left of the anchor point.
`right`	Place the component directly to the right of the anchor point.
`center` (default)	Center the component on the anchor point.

Other (12)

asFileName

text. File name to use when downloading the image.

aspectRatio

number. Aspect ratio (width / height) for the image.

decorative

boolean. Default value: false. Whether the image is purely decorative.

displayMode

keyword. How to size the image.

Value	Description
`block` (default)	Display as a block element on its own line.
`inline`	Render inline with surrounding text.

draggable

boolean. Default value: true. Whether the image can be dragged on a graph.

horizontalAlign

keyword. Horizontal alignment of the image within its container.

Value	Description
`center` (default)	Center the image horizontally.
`left`	Align the image to the left edge.
`right`	Align the image to the right edge.

layer

number. Default value: 0. Z-order layer index when shown on a graph.

mimeType

text. MIME type of the image.

rotate

number. Default value: 0. Rotation angle (radians) applied to the image.

size

keyword. Named size preset for the image.

Value	Description
`tiny`	About 1/12 the full width.
`small`	About 30% of the full width.
`medium` (default)	About half the full width.
`large`	About 70% of the full width.
`full`	The full available width.

source

text. URL or path of the image source.

width

componentSize. Explicit width of the image (overrides size).

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<image name="i">`

Positioning (2)

$i.anchor

point. The coordinates where this component is anchored on the graph.

$i.positionFromAnchor

text. Where this component sits relative to its anchor point.

Other (17)

$i.asFileName

text. File name to use when downloading the image.

$i.aspectRatio

number. The aspect ratio (width / height) of the image.

$i.decorative

boolean. Whether the image is purely decorative.

$i.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$i.displayMode

text. How to size the image.

$i.draggable

boolean. Whether the image can be dragged on a graph.

$i.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$i.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$i.hidden

boolean. Whether this component is hidden from the rendered output.

$i.horizontalAlign

text. Horizontal alignment of the image within its container.

$i.layer

number. Z-order layer index when shown on a graph.

$i.mimeType

text. MIME type of the image.

$i.rotate

number. Rotation angle (radians) applied to the image.

$i.shortDescription

text. A short accessibility description of the image.

$i.size

text. The size of the image.

$i.source

text. URL or path of the image source.

$i.width

componentSize. The display width of the image.

Common to all components (4)

$i.doenetML

text. The DoenetML source code that produced this component.

$i.hide

boolean. Whether to hide this component from the rendered output.

$i.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$i.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: `<image/>` from a hyperlink

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

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

An <image/> is often nested within a <figure> along with a <caption>. A <shortDescription> child 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 Examples

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: shortDescription

A <shortDescription> child provides a description of the <image/> for situations where the image cannot load, or for use with screen-reading technology. It is required for accessibility. If neither a <shortDescription> nor the decorative attribute is 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 Examples

Property Example: Attributes as properties 1

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

Property Example: Attributes as properties 2