Img component

1. Install dependencies

Install the EmailUX Email package locally and a few components.

# pnpm
pnpm add @emailux/components

# npm
npm install @emailux/components

# yarn
yarn add @emailux/components

import { Img } from "@emailux/components";

export default function Email() {
  return <Img src="cat.jpg" alt="Cat" width={300} height={300} />;
}

<Img
  src="banner.png"
  alt="Banner"
  width={600}
  center
  direction="ltr"
  borderRadius="8px"
  spacing="20px"
/>

Name	Type	Required	Default	Description
src	string	Yes	""	Path or URL to the image
alt	string	No	”image”	Alternate description for the image
width	number \| string	No	—	Image width. Numbers are treated as px in style
height	number \| string	No	—	Image height. Numbers are treated as px in style
center	boolean	No	false	Centers the image within the table cell
borderRadius	string	No	—	Applied as CSS border-radius on the image
dir	”ltr” \| “rtl”	No	Comes from wrapping `Html` component’s `dir` context prop which is `ltr`	Text direction
spacing	string	No	Comes from wrapping `Html` component’s `defaultSpacing` context prop which is `20px`	Spacing bottom, by default comes from `Html` defaultSpacing prop
padding	string	No	—	Custom padding for container cell; overrides default bottom spacing. In plain mode, applied to the image style.
style	React.CSSProperties	No	—
plain	boolean	No	false	Returns plain image without container and spacing
href	string	No	-	If you want to convert the image to be clickable
maxHeight	number \| string	No	—
maxWidth	number \| string	No	—