<image/>
<image/> is a Sectional
component that renders an image from a hyperlink or an uploaded file.
Attributes and Properties
| 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 |
| 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
The above listed <image/> attributes are also accessible as properties.