Skip to content
JSX email

Img (Image)

Displays an image in email templates

Install

Install the component from your command line

Terminal window
pnpm add jsx-email

Usage

ImgExample.jsx
import { Img } from 'jsx-email';


const baseUrl = import.meta.isJsxEmailPreview
  ? '/assets/'
  : 'https://assets.example.com/';


const Email = () => {
  return (
    <Img
      src={`${baseUrl}cat.jpg`}
      alt="Cat picture"
      width="300"
      height="300"
    />
  );
};

Props

Optional Props

src

src?: string;

Path or URL to the image.

alt

alt?: string;

Alternative text description for accessibility.

disableDefaultStyle

disableDefaultStyle?: boolean;

When true, removes default styles. Useful when using Tailwind or custom classes.

height

height?: string;

Image height in pixels.

width

width?: string;

Image width in pixels.

Additional Props

This component expresses all of the Common Component Props for ComponentProps<'img'>.