Images

Images are imported as modules:

import example from './example.jpg'
const Component = () => <img src={example} />

Responsive images

You can generate derived images from your source image files, along with srcset and <source> data, using named presets defined in src/imagePresets.js.

Tropical provides <Image> and <Picture> components for use with imported preset images.

import example from './example.jpg?preset=thumbnail'

const Component = () => (
  <>
    <Image src={example} alt='My thumbnail' />

    <Picture src={example}>
      {(imgProps) => <img {...imgProps} alt='My thumbnail' />}
    </Picture>
  </>
)

For more examples see the stories for <Image> and <Picture>.

To understand when to use <img> and when to use <picture> see MDN's Responsive Images docs.

Image references in MDX

Markdown-style image references won't import the asset as a URL.

![this doesn't work](./photo.jpg)

You can either use Vite's public directory:

![This works!](/photo.jpg)

- assumes image is in public/photo.jpg
- image filename isn't hashed for production, so be careful with caching

or (because MDX lets you use JSX) you can just use a regular import and <img> like you would in a React component:

# Hello world

import photo from './photo.jpg'
<img src={photo} />

Next: JSON Feed