Next.js Discord

Discord Forum

Any idea of why my images are not showing up in react-emails

Unanswered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
I want to send email and showing some images but for some reason are not loaded.

Code of my email component

import {
  Body,
  Container,
  Head,
  Heading,
  Row,
  Column,
  Html,
  Img,
  Preview,
  Section,
  Tailwind,
  Text,
} from "@react-email/components";
import * as React from "react";

export const AppointmentEmail = (
  name: string,
  email: string,
  barber: string,
  service: string,
  date: Date,
  time: string
) => {
  const previewText = `Thank you for your reservation ${name}`;

  const baseUrl = process.env.VERCEL_URL
    ? `https://${process.env.VERCEL_URL}`
    : "http://localhost:3000";

  return (
    <Html>
      <Preview>{previewText}</Preview>
      <Head />
      <Tailwind>
        <Body style={main}>
          <Container>
            <Section style={logo}>
              <Img alt="Logo" src={`${baseUrl}/static/logo.png`} />
            </Section>
            <Section style={content}>
              <Row>
                <Img
                  style={image}
                  width={620}
                  src={`${baseUrl}/static/landing-image.jpg`}
                />
              </Row>
              <Row style={{ ...boxInfos, paddingBottom: "0" }}>
                <Column>
                  <Heading
                    style={{
                      fontSize: 32,
                      fontWeight: "bold",
                      textAlign: "center",
                    }}
                  >
                    Hi {name},
                  </Heading>
                  <Heading
                    as="h2"
                    style={{
                      fontSize: 26,
                      fontWeight: "bold",
                      textAlign: "center",
                    }}
                  >
                    Thank you for your appointment.
                  </Heading>
                  <Text style={paragraph}>
                    <b>Date: </b>
                    {new Date(date).toDateString()}
                  </Text>
                  <Text style={{ ...paragraph, marginTop: -5 }}>
                    <b>Time: </b>
                    {time}
                  </Text>
                  <Text style={{ ...paragraph, marginTop: -5 }}>
                    <b>Barber: </b>
                    {barber}
                  </Text>
                  <Text style={{ ...paragraph, marginTop: -5 }}>
                    <b>Service: </b>
                    {service}
                  </Text>

                  <Text style={{ ...paragraph, marginTop: -5 }}>
                    We wait to see you soon.
                  </Text>
                </Column>
              </Row>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export default AppointmentEmail;

const main = {
  backgroundColor: "#fff",
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
};

const logo = {
  padding: "30px 20px",
};

const boxInfos = {
  padding: "20px",
};

const paragraph = {
  fontSize: 16,
};

const image = {
  maxWidth: "100%",
};

const content = {
  border: "1px solid rgb(0,0,0, 0.1)",
  borderRadius: "3px",
  overflow: "hidden",
};

0 Replies