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.