Skip to content

Image Block

The Image Block is a block that allows you to display images in your email. It supports several options to help you customize the appearance of your image.


The Image Block supports the following options:

  • border: The border around the image. It supports the IBorder interface.
  • width: The width of the image. It supports the IWidthHeight interface.
  • height: The height of the image. It supports the IWidthHeight interface.
  • link: The link that the image should link to. It supports the ILink interface.
  • align: The alignment of the image. This can be left, center, or right.
  • title: The title of the image. This is used for accessibility purposes.
  • padding: The padding around the image. It supports the IPadding interface.


To use the Image Block in your email, you can create a new instance of the ImageBlock class and customize its options. Here’s an example:

import {ImageBlock} from "@wlocalhost/ngx-email-builder";
new ImageBlock().toObject({
border: {
width: 1,
color: "#cccccc",
radius: 4,
style: "solid"
width: {
value: 300,
unit: "px"
height: {
value: 200,
unit: "px"
link: {
url: "",
target: "_blank"
align: "center",
title: "Example image",
padding: {
top: 10,
right: 20,
bottom: 10,
left: 20

In this example, we’ve customized the border, width, height, link, alignment, title, and padding of the Image Block.

{% hint style=“info” %} Note: The src and alt options are required, and the width and height options should be specified to ensure that the image is displayed correctly. {% endhint %}