We are adding support for Nextjs. Get in touch on Twitter to learn more.

Images

Handling local and remote images in Reflex.

Local images

To use and reference images in your content, place your images in the content/images directory.

Then reference the image using its path.

<Image src="name-of-image.png" alt="An image" />

The Image component is a wrapper around Gatsby Image. You can learn more about Gatsby image here.

Remote images can be used the same way.

<Image src="https://example.com/image.png" alt="External image" />

Note: Due to a bug with gatsby-remark-images and mdx, we are using a workaround for images. We'll fix this once the bug is resolved.

The Image component has support for aspect ratio using the aspectRatio prop:

<Image src="placeholder.jpg" aspectRatio={4 / 3} />

<Image src="placeholder.jpg" aspectRatio={16 / 8} />