This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

ImageWidget

21st November 2023 at 11:43am

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.

AttributeDescription
sourceThe URL of the image, or the title of an image tiddler
widthThe width of the image
heightThe height of the image
tooltipThe tooltip to be displayed over the image
altThe alternative text to be associated with the image
classCSS classes to be assigned to the <img> element
loadingIntroduced in v5.2.3Optional. Set to lazy to enable lazy loading of images loaded from an external URI
usemapNew 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:

Orange fish Cyan fish Purple fish Green fish Blue fish

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-loadingWhen the image is being loaded
tc-image-loadedThe image has been loaded successfully
tc-image-errorThe 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 data: URI.

See ExternalImages for more details.