# Image

> Image components for displaying images with various styling options.

Web: https://react.email/components/image

Paste any snippet into an email built with React Email. The snippets use the primitives from `@react-email/components`.

## Simple image

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/simple-image

### Tailwind

```tsx
<Img
  alt="Ode Grinder"
  className="mx-auto"
  width={250}
  height={250}
  src="/static/ode-grinder.jpg"
/>
```

### Inline styles

```tsx
<Img
  alt="Ode Grinder"
  width={250}
  height={250}
  src="/static/ode-grinder.jpg"
  style={{ marginLeft: 'auto', marginRight: 'auto' }}
/>
```

## Rounded image

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/rounded-image

### Tailwind

```tsx
<Img
  alt="Stagg Electric Kettle"
  className="rounded-[12px] my-0 mx-auto"
  width={250}
  height={250}
  src="/static/stagg-eletric-kettle.jpg"
/>
```

### Inline styles

```tsx
<Img
  alt="Stagg Electric Kettle"
  width={250}
  height={250}
  src="/static/stagg-eletric-kettle.jpg"
  style={{
    borderRadius: 12,
    marginTop: '0',
    marginBottom: '0',
    marginLeft: 'auto',
    marginRight: 'auto',
  }}
/>
```

## Image with varying sizes

Source: https://github.com/resend/react-email/tree/canary/apps/web/components/image-with-varying-sizes

### Tailwind

```tsx
<>
  <Img
    alt="Atoms Vacuum Canister"
    className="rounded-[12px] my-[12px] mx-auto"
    width={150}
    height={150}
    src="/static/atmos-vacuum-canister.jpg"
  />
  <Img
    alt="Atoms Vacuum Canister"
    className="rounded-[12px] my-[12px] mx-auto"
    width={200}
    height={200}
    src="/static/atmos-vacuum-canister.jpg"
  />
  <Img
    alt="Atoms Vacuum Canister"
    className="rounded-[12px] my-[12px] mx-auto"
    width={250}
    height={250}
    src="/static/atmos-vacuum-canister.jpg"
  />
</>
```

### Inline styles

```tsx
<>
  <Img
    alt="Atoms Vacuum Canister"
    height={150}
    src="/static/atmos-vacuum-canister.jpg"
    style={{ borderRadius: 12, margin: '12px auto 12px' }}
  />
  <Img
    alt="Atoms Vacuum Canister"
    height={200}
    src="/static/atmos-vacuum-canister.jpg"
    style={{ borderRadius: 12, margin: '12px auto 12px' }}
  />
  <Img
    alt="Atoms Vacuum Canister"
    height={250}
    src="/static/atmos-vacuum-canister.jpg"
    style={{ borderRadius: 12, margin: '12px auto 12px' }}
  />
</>
```