Image

Images can be displayed using either standard Markdown syntax, or the <Image> component.

Usage

To use the <Image> component, add it to your components list in your main.dart file:

ContentApp(
  components: [
    Image(),
  ],
)

Then use the <Image> component in your content files to display images:

<Image src="https://placehold.co/600x400" alt="Sample Image" />

Captions

To add a caption below the image, use the caption prop:

<Image src="https://placehold.co/600x400" caption="This is a sample image." alt="Sample Image" />

Zooming

The <Image> component also supports zooming of images. To enable zooming, pass the zoom prop to the image:

<Image src="https://placehold.co/600x400" zoom alt="Sample Image" />

Click on the image to zoom in, and click again or scroll to zoom out.

Alternatively, you can enable zooming globally in your app like this:

ContentApp(
  components: [
    Image(zoom: true),
  ],
)