Image

JSX Mail revolutionizes the way images are handled in email templates. Unlike other frameworks, we allows you to import images as you would in React without needing to host them externally.

• Automated Process: When you execute the prepare command, JSX Mail automatically checks for changes in your email template images, optimizes them, and uploads them to JSX Mail Cloud.

• Two Image Handling Methods: JSX Mail offers two approaches:

  1. Internal Images: The default, automated method. JSX Mail handles optimization and cloud uploading.
  2. External Images: Traditional method, where you provide image URLs as in other frameworks.

​

Which Method to Use

• Internal Images: Ideal for static assets like logos or icons.
• External Images: Best for dynamic content, like user profile pictures.

Overall, JSX Mail offers flexibility and efficiency in image management within your email templates, ensuring a smoother, more automated workflow.

​

Using Internal Images

Internal images streamline your workflow. Import images as in React, and JSX Mail takes care of the rest:

import LogoImg from '../assets/logo.png';

export default function UsingImage() {
  return <img src={LogoImg} alt="Your alt text here" />;
}

• Preview and Deployment: In preview mode, JSX Mail optimizes and uses images locally. Upon rendering your email template after preparation, images are sent to JSX Mail Cloud.

You can also use your own AWS S3 storage. Configure jsx-mail.config.js with storage set to S3:

module.exports = {
  dir: 'mail',
  storage: 'S3',
};

Set the following environment variables:

Alternatively, define these directly in jsx-mail.config.js:

module.exports = {
  dir: 'mail',
  storage: 'S3',
  awsAccessKeyId: 'your-access-key-id',
  awsBucket: 'your-bucket-name',
  awsRegion: 'your-region',
  awsSecretAccessKey: 'your-secret-access-key',
  awsFolder: 'mail-images',
};

Note: Its not recommended to define these directly in jsx-mail.config.js. Maybe you want to use dotenv to manage your environment variables and pass the env to the jsx-mail.config.js.

​

Using External Images

For images requiring external hosting or dynamic content, use the external image method:

export default function UsingImage() {
  return <img src="https://example.com/image.png" alt="Your alt text here" />;
}

• Note: JSX Mail won’t optimize or re-upload these external images; you’ll manage them independently.