Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

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

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} />
NavsMetatags

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github