---
title: "New Component - Image"
description: "Place a photo, logo, or screenshot from any URL and swap it on every render. Object-fit sizing, focal point, rounding, borders, and shadows included."
url: "https://www.imejis.io/changelogs/image-component"
image: "https://www.imejis.io/og/components/image.jpg"
published: "2026-08-05"
author: "imejis"
---

# New Component - Image

## New Component: Image

The simplest dynamic field is often a picture. A product photo, an author avatar, a partner logo, the hero of the article you're generating an OG card for. The Image component drops any image into a design from a URL and swaps it on every render.

### Fit and frame

Point it at an image URL and control how it sits in its box. `imageSize` maps to CSS object-fit (`cover`, `contain`, `fill`, `none`, `scale-down`) and `imagePosition` sets the focal point, so you crop exactly where you want. Round the corners with `borderRadius`, set to half the box size for a perfect circle, then add a border, a background behind transparent art, and a drop shadow to lift it off the canvas.

### Dynamic data, per render

The URL lives on the component and is overridable like any other field:

```http
POST https://render.imejis.io/v1/<design-id>
{ "photo.image": "https://picsum.photos/seed/hello/600/600" }
```

Every render fetches whatever URL you send, from your CDN, a storage bucket, or your own API. Build the card once and let product photos, avatars, or event logos ride in from your data.

### Try it

It's under Content in the editor palette, with a live playground on the [image component page](/components/image) and ready-made looks for [contain](/components/image/contain), [circle avatars](/components/image/circle-avatar), and [polaroid](/components/image/polaroid) frames.