DynamicImage

The component

The DynamicImage component is the base component used for all image generation. It simply returns a dynamic URL to the image, which changes as any reactive properties used within the component change.

All images are generated on the server-side, when the client requests them.

Usage

You can simply wrap the JSX that you wish to be an image in the DynamicImage component:

import { DynamicImage } from '@solid-mediakit/og'

export const Component = () => {
  return (
    <DynamicImage>
      <div>Hello World</div>
    </DynamicImage>
  )
}

As mentioned before, this component merely returns a URL to the image. You can wrap in the Image component to render the image:

import { DynamicImage, Image } from '@solid-mediakit/og'

export const Component = () => {
  return (
    <Image>
      <DynamicImage>
        <div>Hello World</div>
      </DynamicImage>
    </Image>
  )
}

Or, if you want the image to be used as the OpenGraph image for the page, check out the opengraph page.

Handling dynamic content

The compiler automatically captures and handles any reactive properties as well as any variables used. The component automatically changes its URL and triggers an update whenever one of these properties changes:

import { DynamicImage, Image } from '@solid-mediakit/og'

export const Component = () => {
  const [message, setMessage] = createSignal('Hello World')
  return (
    <div>
      <Image>
        <DynamicImage>
          <div
            style={{
              width: '100%',
              height: '100%',
              display: 'flex',
              'align-items': 'center',
              'justify-content': 'center',
              'font-size': '128px',
              background: 'lavender',
            }}
          >
            {`👋 Hello, ${count() * 2}!`}
          </div>
        </DynamicImage>
      </Image>
      <button
          onClick={() => {
            setCount(c => c += 1) // The component above automatically detects this change,
            // and the image will rerender on the client
          }}
        >
          Increment
        </button>
    </div>
  )
}

Last updated: 6/13/25, 4:04 PM