Dynamic Images

Serve personalized images to each recipient by using merge tags inside image URLs. The editor keeps a sample image for design preview, and the dynamic URL replaces it at send time.

React

import { useRef } from "react";
import {
  PexelizeEditor,
  PexelizeEditorRef,
} from "@pexelize/react-email-editor";

function DynamicImageEditor() {
  const editorRef = useRef<PexelizeEditorRef>(null);

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="px_your_key"
      editorMode="email"
      options={{
        features: {
          dynamicImage: true,
        },
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="px_your_key"
    editor-mode="email"
    :options="editorOptions"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { PexelizeEditor } from "@pexelize/vue-email-editor";

const editorRef = ref<InstanceType<typeof PexelizeEditor>>();

const editorOptions = {
  features: {
    dynamicImage: true,
  },
};
</script>

Angular

import { Component, ViewChild } from "@angular/core";
import { PexelizeEditorComponent } from "@pexelize/angular-email-editor";

@Component({
  selector: "app-dynamic-image-editor",
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      #editor
      editorKey="px_your_key"
      editorMode="email"
      [options]="editorOptions"
    ></pexelize-editor>
  `,
})
export class DynamicImageEditorComponent {
  @ViewChild("editor") editorComp!: PexelizeEditorComponent;

  editorOptions = {
    features: {
      dynamicImage: true,
    },
  };
}

Vanilla JS

pexelize.init({
  containerId: "editor-container",
  editorKey: "px_your_key",
  editorMode: "email",
  options: {
    features: {
      dynamicImage: true,
    },
  },
});

When enabled, every Image tool in the editor shows a Dynamic Image section at the top of its content properties panel.

How it works

Dynamic images use two separate URLs stored in the design:

Field	Purpose	Example
Image URL (src.url)	Sample image shown in the editor and preview	https://cdn.example.com/birthday-sample.png
Dynamic URL (dynamicUrl)	Merge-tag URL used in the exported HTML	https://img.nifty.com/card?name={{first_name}}

The editor always displays the sample image so you can design the layout accurately. When you export the HTML, the dynamic URL replaces the sample image in the <img src> attribute. Your sending platform (Mailchimp, Klaviyo, SendGrid, etc.) then resolves the merge tags for each recipient at delivery time.

Design time:  <img src="https://cdn.example.com/birthday-sample.png" />
Export HTML:   <img src="https://img.nifty.com/card?name={{first_name}}" />
Sent to John:  <img src="https://img.nifty.com/card?name=John" />
Sent to Katie: <img src="https://img.nifty.com/card?name=Katie" />

End-user workflow

1. Drag an Image tool onto the canvas.
2. Upload or select a sample image that represents the dynamic content (e.g., a birthday card with a placeholder name).
3. Toggle Dynamic Image ON in the content properties.
4. Enter the Dynamic URL containing merge tags (e.g., https://img.nifty.com/card?name={{first_name}}).
5. Optionally set an Image Title for the title attribute.

The sample image remains visible in the editor canvas and preview. The dynamic URL is only used in the exported HTML.

Upload a sample image

For the best design experience, upload a representative sample image before enabling the dynamic URL. This lets you see realistic dimensions and layout in the editor. The default placeholder works but does not show the actual content dimensions.

Example dynamic URLs

Personalized birthday card:

https://img.niftyimages.com/birthday?name={{first_name}}

Countdown timer:

https://img.countdownmail.com/timer.png?end={{event_date}}

Product recommendation:

https://cdn.example.com/recommend?cust_id={{customer_id}}&offer={{offer_id}}

Abandoned cart product image (pure merge tag):

{{item.image}}

Dynamic image services

Services like NiftyImages and CountdownMail generate personalized images on the fly from URL parameters. Combine them with merge tags for powerful personalization.

Design JSON structure

When dynamic image is enabled, the image content stores these additional fields:

{
  "type": "image",
  "values": {
    "src": {
      "url": "https://cdn.example.com/birthday-sample.png",
      "width": 600,
      "height": 300
    },
    "dynamicImage": true,
    "dynamicUrl": "https://img.nifty.com/card?name={{first_name}}",
    "imageTitle": "Personalized Birthday Card",
    "altText": "Birthday card",
    "size": { "autoWidth": true, "width": "100%" },
    "textAlign": "center"
  }
}

Field	Type	Description
dynamicImage	boolean	Whether dynamic image mode is enabled
dynamicUrl	string	The merge-tag URL used in exported HTML
imageTitle	string	Value for the title attribute when dynamic mode is on

Exported HTML

When dynamicImage is true and dynamicUrl is set, the exported HTML uses the dynamic URL as the image source:

<img
  src="https://img.nifty.com/card?name={{first_name}}"
  alt="Birthday card"
  title="Personalized Birthday Card"
  width="580"
  height="auto"
  style="display: block; height: auto; border: 0; width: 100%;"
/>

When dynamicImage is false or dynamicUrl is empty, the exported HTML uses the regular src.url:

<img
  src="https://cdn.example.com/birthday-sample.png"
  alt="Birthday card"
  title="Birthday card"
  width="580"
  height="auto"
  style="display: block; height: auto; border: 0; width: 100%;"
/>

Merge tags are not resolved by the editor

The editor exports merge tags as-is (e.g., {{first_name}}). Your email service provider is responsible for replacing them with actual recipient data at send time. The editor preview always shows the sample image.

Disabling the feature

Set dynamicImage to false in the features config to hide the dynamic image toggle from the image tool, even if the plan allows it:

options: {
  features: {
    dynamicImage: false,
  },
}

When omitted or set to true, the feature follows the plan-level permission (core.dynamicImage).

Configuration reference

Property	Type	Default	Description
features.dynamicImage	boolean	undefined	Enable or disable the dynamic image toggle. undefined or true defers to the plan. false explicitly disables.

Next steps

• Merge Tags -- add personalization tokens to text content
• Display Conditions -- show/hide rows based on recipient data
• Export HTML -- export your design with dynamic URLs included