Appearance

Image ​

Displays an image

Install ​

Install the component from your command line

console
pnpm install email-craft
pnpm install email-craft
console
bun install email-craft
bun install email-craft
console
npm install email-craft
npm install email-craft
console
yarn install email-craft
yarn install email-craft

Usage ​

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

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

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

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, you can resolve the path with node. Just remember, for production, you'll need to host the images somewhere and reference them with a URL.

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

const baseUrl = import.meta.env.DEV
  ? import.meta.resolve('../assets/')
  : 'https://assets.example.com/';

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

const baseUrl = import.meta.env.DEV
  ? import.meta.resolve('../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'>.