logoImejis.io

Image component

Contenttype: "image"

Displays an image from a URL with object-fit sizing, positioning, borders, rounding and shadows. Swap the URL at render time to personalize every image.

Edit it — this is the actual editor panel
Design JSON
{
  "title": "Image sample",
  "description": "A rounded dynamic photo",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-image",
      "key": "photo",
      "type": "image",
      "position": {
        "x": 250,
        "y": 60
      },
      "rotation": 0,
      "size": {
        "width": 300,
        "height": 300
      },
      "dynamic": true,
      "image": "https://picsum.photos/600/600",
      "properties": {
        "imageSize": "cover",
        "borderRadius": 16,
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Image examples

Real renders of the image — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

E-commerce product hero

A wide cover-cropped product photo filling the card, corners rounded.

API overrides for this example
{
  "photo.imageSize": "cover",
  "photo.borderRadius": 16
}

Article thumbnail with soft shadow

A blog-post thumbnail lifted off the canvas by a deep drop shadow.

API overrides for this example
{
  "photo.borderRadius": 24,
  "photo.boxShadow": "0 20px 40px rgba(0,0,0,0.2)"
}

All image styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

ContainThe full image letterboxed inside its box on a neutral background.
Circle avatarFully-rounded crop with a ring border — profile photos and avatars.
PolaroidPadded frame with a soft shadow for a printed-photo feel.

Use cases

What developers typically build with the image component.

  • Product cards that pull each item photo from your catalog URL
  • OG images featuring the author avatar or article hero image
  • E-commerce promo visuals with the featured product swapped per render
  • Certificates and badges stamped with a partner or event logo

Use it dynamically via the API

Point '<key>.image' (or just '<key>') at any image URL per render; opacity, borders and padding can be overridden too.

Full API request with the sample design's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "photo.image": "https://picsum.photos/600/600",
    "photo.imageSize": "cover",
    "photo.borderRadius": 16,
    "photo.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Property reference

Every property the image component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
imagestringtext—Image URL (stored on the component's top-level image field; overridable via config).
imageSize'cover' | 'contain' | 'fill' | 'none' | 'scale-down'covercontainfillnonescale-down"cover"How the image fits its box (CSS object-fit).
imagePositionstringtext"center"Focal point of the image within its box (CSS object-position).
backgroundColorcolortransparent"transparent"Background color visible behind/around the image.
paddingstringtext"0"CSS padding between the box edge and the image.
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Yes — point '<key>.image' (or just the key) at any publicly reachable image URL in the modifications JSON and each render fetches that image.

imageSize maps to CSS object-fit (cover, contain, fill, none, scale-down) and imagePosition sets the focal point, so you control cropping precisely.

Yes. borderRadius rounds the corners — set it to half the box size for a perfect circle — and border width, color, style and shadows are configurable too.

Any URL the renderer can fetch — your CDN, storage bucket or API. The URL lives on the component and is overridable per render like any other property.