caption: image created: 20140416160234142 modified: 20231121114351165 tags: Widgets title: ImageWidget type: text/vnd.tiddlywiki ! 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 `` element | |loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI | |usemap|<<.from-version "5.3.2">>Optional usemap attribute to be assigned to the `` 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 `` [[Image maps area|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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`: [img[Tiddler Fishes.svg]] Orange fish Cyan fish Purple fish Green fish Blue fish ! Image Status Classes <> The following CSS classes are automatically added to the `` 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 `` element and the ''text'' field is ignored * Without the ''_canonical_uri'' field, the image widget generates an `` element that embeds the image data directly using a `data:` URI. See ExternalImages for more details.