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 does not have IIIF support or is 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 cropping 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 cropping 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

Pass an annotation to mark a region of the image. This callout is written for the example; it is not provider metadata. Its local ID identifies the callout, and its target uses the real Canvas ID from the Boondi Manifest.

A callout marks a detail in the Boondi print.

<Image  src="https://iiif.dc.library.northwestern.edu/iiif/3/138a94b0-175a-4152-98c7-df58661ce7d5"  isTiledImage  alt="Annotated Boondi panorama"  caption="A callout marks a detail in the Boondi print."  annotations={[    {      annotation: {        id: "#boondi-detail",        type: "Annotation",        motivation: ["tagging"],        body: [          {            id: "#boondi-detail-text",            type: "TextualBody",            value: "Explore this selected detail of the Boondi print.",          },        ],        target: {          type: "SpecificResource",          source: {            id: "https://api.dc.library.northwestern.edu/api/v2/file-sets/138a94b0-175a-4152-98c7-df58661ce7d5?as=iiif",            type: "Canvas",          },          selector: {            type: "FragmentSelector",            value: "xywh=1900,4050,1500,1000",          },        },      },      targetIndex: 0,    },  ]}/>