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.
|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 |
|loading|| New in: 5.2.3Optional. Set to |
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.
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 a
See ExternalImages for more details.