I'm creating an email using react-email in next js.
I am having issue rendering my company logo which is located in my public directory
notice the <img tag
Here is my project structure
My public directory and email directory are the ones of interest
the code snippet below is in the NewLead.tsx file
import {
Body,
Container,
Column,
Head,
Html,
Img,
Link,
Preview,
Row,
Section,
Text,
} from "@react-email/components";
import * as React from "react";
interface Props {
name: string;
business_name: string;
email_address: string;
phone_number: string;
requested_dollar_amount: string;
gross_monthly_revenue: string;
}
function formatNumberWithCommas(numberStr: string): string {
// First, validate if the input is a valid number
if (!/^\d+$/.test(numberStr)) {
return "Invalid input";
}
// Reverse the string to insert commas every three digits
const reversedStr = numberStr.split("").reverse().join("");
let formattedStr = "";
for (let i = 0; i < reversedStr.length; i++) {
if (i > 0 && i % 3 === 0) {
formattedStr += ",";
}
formattedStr += reversedStr[i];
}
// Reverse the string back to its original order and add a dollar sign
return "$" + formattedStr.split("").reverse().join("");
}
interface Props {
name: string;
business_name: string;
email_address: string;
phone_number: string;
requested_dollar_amount: string;
gross_monthly_revenue: string;
}
export const NewLeadEmail = ({
name,
business_name,
email_address,
phone_number,
requested_dollar_amount,
gross_monthly_revenue,
}: Props) => (
<Html>
<Head />
<Preview>AI Capital New Lead</Preview>
<Body style={main}>
<Container style={container}>
<Section>
<Column>
<Img
src={"/images/ai-capital.png"}
width="150"
height="100"
alt="AI Capital Logo"
/>
</Column>
<Column align="right" style={tableCell}>
<Text style={heading}>New Lead</Text>
</Column>
</Section>
<Section style={informationTable}>
<Row style={informationTableRow}>
<Column colSpan={2}>
<Row>
<Column style={informationTableColumn}>
<Text style={informationTableLabel}>NAME</Text>
{name}
</Column>
<Column style={informationTableColumn}>
<Text style={informationTableLabel}>BUSINESS NAME</Text>
{business_name}
</Column>
</Row>
<Row>
<Column style={informationTableColumn}>
<Text style={informationTableLabel}>EMAIL</Text>
<Link
style={{
...informationTableValue,
color: "#15c",
textDecoration: "underline",
}}
>
{email_address}
</Link>
</Column>
<Column style={informationTableColumn}>
<Text style={informationTableLabel}>PHONE NUMBER</Text>
<Link
style={{
...informationTableValue,
color: "#15c",
textDecoration: "underline",
}}
>
{phone_number}
</Link>
</Column>
</Row>
</Column>
<Column style={informationTableColumn} colSpan={2}>
<Row>
<Column style={informationTableColumn}>
<Text style={informationTableLabel}>
REQUESTED DOLLAR AMOUNT
</Text>
{formatNumberWithCommas(requested_dollar_amount)}
</Column>
</Row>
<Row>
<Column style={informationTableColumn}>
<Text style={informationTableLabel}>
GROSS MONTHLY REVENUE
</Text>
{formatNumberWithCommas(gross_monthly_revenue)}{" "}
</Column>
</Row>
</Column>
</Row>
</Section>
</Container>
</Body>
</Html>
);
export default NewLeadEmail;
Tried a few different variations of importing strategies and moving around the img file, even when i put it in the same directory as NewLead.tsx it won't seem to render it