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 |
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.
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.