Appearance

Image ​

Displays an image

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

Add the component to your email template. Include styles where needed.

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

const Email = () => {
  return <Img src="cat.jpg" alt="Cat" width="300" height="300" />;
};
import { Img } from 'jsx-email';

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

TIP

All email clients can display .png, .gif, and .jpg images. Unfortunately, .svg images are not well supported, regardless of how they're referenced, so avoid using these. See Can I Email for more information.

TIP

To use local images during development, place the images in your templates directory. We recommend using a assets/ or static/ subdirectory. Images can then be accessed from the server root. Just remember, for production, you'll need to host the images somewhere and reference them with a URL.

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" width="300" height="300" />;
};
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" width="300" height="300" />;
};

Component Props ​

ts
alt?: string;
alt?: string;

Alternate description for an image

ts
disableDefaultStyle?: boolean;
disableDefaultStyle?: boolean;

If true, instructs the component not to add default style properties to the component. This can be useful when attempting to override default styles with Tailwind or class names.

ts
height?: string;
height?: string;

The height of an image in pixels

ts
src?: string;
src?: string;

The path to the image

ts
width?: string;
width?: string;

The width of an image in pixels

TIP

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