We are adding support for Nextjs. Get in touch on Twitter to learn more.
See a demoImages
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
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.
Aspect ratio
The Image component has support for aspect ratio using the aspectRatio prop:
4/3
<Image src="placeholder.jpg" aspectRatio={4 / 3} />
16/8
<Image src="placeholder.jpg" aspectRatio={16 / 8} />