Skip to main content
Display an image in your email with proper email client compatibility.

​
Installation

npm install @react-email/img -E

​
Usage

Add the component to your email template. Include styles where needed. 
import { Img } from "@react-email/img";

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

​
Props

The Img component accepts all standard HTML image element attributes.
​
src
string
The path to the image. Can be a relative path or absolute URL
​
alt
string
Alternate description for the image. Important for accessibility and when images are blocked
​
width
string | number
The width of the image in pixels
​
height
string | number
The height of the image in pixels
​
style
React.CSSProperties
Inline styles for the image. Default styles ensure consistent rendering across email clients

​
Default Styles

The Img component includes these default styles for email compatibility:
  • display: block - Prevents extra spacing below images
  • outline: none - Removes outline
  • border: none - Removes border
  • textDecoration: none - Removes text decoration

​
Example with Responsive Width

import { Img } from "@react-email/img";

const Email = () => {
  return (
    <Img 
      src="https://example.com/logo.png" 
      alt="Company Logo" 
      width="600"
      style={{ maxWidth: "100%", height: "auto" }}
    />
  );
};

​
TypeScript

export type ImgProps = Readonly<React.ComponentPropsWithoutRef<'img'>>;

​
Email Client Support

This component was tested using the most popular email clients.
GmailApple MailOutlookYahoo! MailHEYSuperhuman
✔✔✔✔✔✔

Build docs developers (and LLMs) love

Get started for freeTalk to us