Introduction
The image widget displays images that can be specified as a remote URL or the title of a local tiddler containing the image.
Content and Attributes
Any content of the <$image> widget is ignored.
| Attribute | Description |
|---|---|
| source | The URL of the image, or the title of an image tiddler |
| width | The width of the image |
| height | The height of the image |
| tooltip | The tooltip to be displayed over the image |
| alt | The alternative text to be associated with the image |
| class | CSS classes to be assigned to the <img> element |
| loading | Introduced in v5.2.3Optional. Set to lazy to enable lazy loading of images loaded from an external URI |
| usemap | New in v5.3.2Optional usemap attribute to be assigned to the <img> element for use with HTML image maps |
| loadActions | New in v5.4.0Optional actions invoked when the image has completed loading. See below for variables passed to the actions. |
The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.
The following variables are accessible in the loadActions: New in v5.4.0
| Variables | Description |
|---|---|
dom-* | All DOM attributes of the image are made available as variables, with the prefix dom- |
tv-popup-coords | A relative co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the image |
tv-popup-abs-coords | Introduced in v5.2.4 An absolute co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the image (see Coordinate Systems for more information) |
tv-selectednode-posx | x offset position of the image DOM node |
tv-selectednode-posy | y offset position of the image DOM node |
tv-selectednode-width | offsetWidth of the image DOM node |
tv-selectednode-height | offsetHeight of the image DOM node |
img-natural-width | Original intrinsic width of the image |
img-natural-height | Original intrinsic height of the image |
Responsive images and <map>
Image maps area coordinates are numbers of CSS pixels, therefore they do not scale. If you want to use responsive images, you can use a svg and foreignObject:
Image Status Classes
The following CSS classes are automatically added to the <img> element to indicate the status of the image. Note that only one of these classes will be added at the same time.
| tc-image-loading | When the image is being loaded |
| tc-image-loaded | The image has been loaded successfully |
| tc-image-error | The image could not be loaded |
External Images and the _canonical_uri field
When used to display tiddler-based images, the image widget operates in two distinct modes:
- If the _canonical_uri field is present then it is used as the src attribute of the generated
<img>element and the text field is ignored - Without the _canonical_uri field, the image widget generates an
<img>element that embeds the image data directly using adata:URI.
See ExternalImages for more details.