在下一个js中使用react-email发出渲染图像

问题描述 投票：0回答：1

我正在下一个js中使用react-email创建一封电子邮件。
我在渲染位于我的公共目录中的公司徽标时遇到问题
注意 这是我的项目结构
我感兴趣的公共目录和电子邮件目录 下面的代码片段位于 NewLead.tsx 文件中

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;

尝试了导入策略和移动 img 文件的几种不同变体，即使我将其放在与 NewLead.tsx 相同的目录中，它似乎也不会渲染它

reactjs next.js resend.com
1个回答
0
投票

React-Email 不会从内部 public/ 文件夹加载您的图像，您需要提供文件的完整路径。它与 Nextjs 分开运行，并且由于 Img React-Email 组件与 Nextjs Image 组件不同，因此它不会自动在 src 前面添加完整路径。

要在 React-Email 的预览模式下查看图像，它们必须存储在 emails 文件夹内的 static 文件夹中。 https://react.email/docs/cli#where-can-i-place-my-static-files-for-previewing

他们给出的示例代码：

const baseURL = process.env.NODE_ENV === "production" ? "https://cdn.com" : ""; 
export default function Email(props) {
  return (
    <div>
      <img src={`${baseURL}/static/email-logo.png`} />
    </div>
  );
}

因此，在您的情况下，要在预览模式和生产模式下访问文件，您可以保存相同的文件（不幸的是，您仍然必须复制它https://github.com/resend/react-email/discussions/1228）在 public/images/ai-capital.png 和 emails/static/images/ai-capital.png 中。

const baseURL = process.env.NODE_ENV === "production" ? "https://example.com" : "/static"

然后将现有的 Img 组件替换为以下内容：

    <Img
      src={`${baseURL}/images/ai-capital.png`}
      width="150"
      height="100"
      alt="AI Capital Logo"
    />
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.