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

ImageWidget

1st January 2022 at 8:59pm

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

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