Clarify the Image component behavior

[maelp]

Goals

Right now from reading the doc it's not clear how the Image component handles images:

• does it inline them as attachments?
• does it expect them to be inlined as attachments, and if so, with what name?
• does it expect them to be reachable from a public URL, and if so, how do we configure that URL?

some example code like the turborepo https://github.com/resend/react-email-turborepo-pnpm-example/tree/main/packages/transactional/emails/static shows for instance a local static folder, but doesn't mention how those images will be made available for consumers of the emails?

Background

There are multiple ways to show images in emails: embedding them as inline attachments, or linking them from a public http endpoint, but the documentation doesn't make clear whether one, the other, or both behaviors are used, and how to configure them

Proposal

Clarify how images are handled, whether everything is automated (inlining), whether we should manually upload images somewhere, and how to configure that behavior (public base URL, etc)

[maelp]

In particular, is there the equivalent of import.meta.isJsxEmailPreview in react-email?

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" />;
};

[maelp]

I guess what we would need is that this behavior be configurable (eg replace /static with other possible values)

react-email/packages/react-email/src/utils/preview/serve-static-file.ts

Line 13 in b2407a1

const pathname = parsedUrl.pathname!.replace('/static', './static');