Image

<Image> embeds Clover’s zoomable viewer for any IIIF Image API resource or static asset. It handles deep zoom, lazy tile loading, and optional annotations without any manual wiring.

Historic buildings in Lucknow, India, 1860. No. 12 The Shah Nujeef. No. 13 Khoorsyad Munzil. No. 14 The Motee Mahal. No. 15 Interior of the Compound of Alum Bagh.

<Image  src="https://iiif.dc.library.northwestern.edu/iiif/3/3d4a01f1-664d-48aa-89b7-a887d3843644"  isTiledImage  alt="Lithographs of historic buildings in Lucknow, India"  caption="Historic buildings in Lucknow, India, 1860. No. 12 The Shah Nujeef. No. 13 Khoorsyad Munzil. No. 14 The Motee Mahal. No. 15 Interior of the Compound of Alum Bagh."/>

Props

Prop	Type	Required	Notes
`src`	string	✅	IIIF Image API endpoint or static asset URL.
`isTiledImage`	boolean		Set to `true` for IIIF Image API URLs so Clover fetches tiles.
`height`	string		CSS height for the viewport (`600px` default).
`alt`	string		Accessible alt text for the rendered canvas.
`caption`	string		Optional footer shown under the viewer.
`backgroundColor`	string		Placeholder background while tiles load.
`annotations`	array		Clover annotation objects for callouts.
`className`	string		Extra classes for layout tweaks.

Examples

Static image

In many cases, you may want to provide a simple static image that do not have IIIF support or are hosted externally. Use <Image> for regular JPG or PNG assets as well. This example references the Wikimedia scan of Herman Moll’s 1717 East Indies map.

1717 map by Herman Moll depicting the East Indies from the Persian frontier to New Guinea and southern Japan.

<Image  src="https://upload.wikimedia.org/wikipedia/commons/1/10/B26055943A_-_A_map_of_the_East-Indies_and_the_adjacent_countries.jpg"  alt="1717 map by Herman Moll illustrating colonial reach"  caption="1717 map by Herman Moll depicting the East Indies from the Persian frontier to New Guinea and southern Japan."/>

Full canvas tiles

Use the base Image API endpoint with isTiledImage to keep very large works responsive.

The full Boondi panorama renders with tile-based zoom and pan controls.

<Image  src="https://iiif.dc.library.northwestern.edu/iiif/3/138a94b0-175a-4152-98c7-df58661ce7d5"  isTiledImage  alt="Wide view of Boondi"  caption="The full Boondi panorama renders with tile-based zoom and pan controls."  height="520px"/>

Region focus

Append xywh fragments to zoom into a detail from the same source canvas. In this case, we draw a 3000,2800,2000,1600 rectangle around a palace below the ridge fortifications.

Region croping highlighting hillside palace below ridge fortifications.

<Image  src="https://iiif.dc.library.northwestern.edu/iiif/3/138a94b0-175a-4152-98c7-df58661ce7d5/3000,2800,2000,1600/max/0/default.jpg"  alt="Palace below ridge fortifications"  caption="Region croping highlighting hillside palace below ridge fortifications."/>

We can also zoom into a more specific detail by combining xywh with size constraints. Here, we focus on a palace above Boondi using 950,520,7100,4740/!1200,630 to remove extraneous context.

Detail from The town & pass of Boondi, created for Governor-General Thomas Munro.

<Image  src="https://iiif.dc.library.northwestern.edu/iiif/3/138a94b0-175a-4152-98c7-df58661ce7d5/950,520,7100,4740/!1200,630/0/default.jpg"  alt="Detail of a hillside palace above Boondi"  caption="Detail from The town & pass of Boondi, created for Governor-General Thomas Munro."/>

Annotated callouts

We can also pass annotations to draw attention to important regions or narrative elements. In this example, an annotation highlights a group of travelers near the ridge. This retains zoom and pan functionality across the image while adding context.

Annotations describe figures and landmarks inside the panorama.

<Image  src="https://iiif.dc.library.northwestern.edu/iiif/3/138a94b0-175a-4152-98c7-df58661ce7d5"  isTiledImage  alt="Annotated Boondi panorama"  caption="Annotations describe figures and landmarks inside the panorama."  annotations={[    {      annotation: {        id: "https://iiif.dc.library.northwestern.edu/iiif/3/f7409acd-e3f9-496a-b733-81f46d4ffa4f/annotation/0",        type: "Annotation",        motivation: ["tagging"],        body: [          {            id: "https://iiif.dc.library.northwestern.edu/iiif/3/f7409acd-e3f9-496a-b733-81f46d4ffa4f/annotation/0/body/0",            type: "TextualBody",            value: "Five travelers pause with their horses near the ridge.",          },        ],        target: {          type: "SpecificResource",          source: {            id: "https://iiif.dc.library.northwestern.edu/iiif/3/f7409acd-e3f9-496a-b733-81f46d4ffa4f/canvas/1",            type: "Canvas",          },          selector: {            type: "FragmentSelector",            value: "xywh=1900,4050,1500,1000",          },        },      },      targetIndex: 0,    },  ]}/>