Image

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

To use the <Image> component, add it to the components list of ContentApp:

import 'package:jaspr_content/components/image.dart';

// ...

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

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

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

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" />

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),
  ],
)