Skip to content

## Image ​

Displays an image

## Install ​

Install the component from your command line

pnpmbunnpmyarn
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, 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 'jsx-email';

    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 'jsx-email';

    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'>`.