使用 API 路由上的 nextjs 和 renderToString 将图像发送到电子邮件

Question

我想发送带有样式并包含图像的电子邮件。

我正在使用

renderToString

方法将道具传递到组件中。一切都在 API 路由中运行。

mport client from "@/lib/prisma";


import { renderToString } from 'react-dom/server';
import Quotes from "@/pages/emails/Quotes/Quotes";
import { sendEmailHTML } from "@/lib/SendEmail/sendEmail";


export default async function handler(req, res) {
    const { email, firstName, lastName, phone, message } = req.body;
    
    try {
            // Pass the props here
            const emailTemplate = renderToString(<Quotes clientEmail={email} firstName={firstName} lastName={lastName} phone={phone} message={message} />);


            await client.Quote.create({ data: { email, firstName, lastName, 
                phone: `0${phone}`, 
                message } });
            res.status(201).send('Quote created');

            await sendEmailHTML('New quote', emailTemplate);
        } 

        catch (error) {
            res.status(500).json({error});
        }
}

Quotes 组件获取 props 并应用样式（只是为了查看它的工作原理）。但是图片不行……是方法有问题吗？

import Image from 'next/image'
import React from 'react'

const Quotes = props => {


  const mailMainWrapper = {
    backgroundColor: 'green '
  }

  const styling = {color: 'blue', fontWeight: 'bolder'}


  return (
    <main className={mailMainWrapper}>
      <Image src='https://source.unsplash.com/zTNv5fteUWI' width={200} height={120} alt='jbaofb' />
        <div style={mailMainWrapper}>
          <p style={styling}>Client email:    { props.clientEmail } </p>
          <p>Full name:       { props.firstName + ' ' + props.lastName} </p>
          <p>Contact number:  { props.phone } </p>
          <p>Message          { props.message } </p>
        </div>
    </main>
  )
}

export default Quotes

Answer 1

是的，next/image 尝试获取图像。所以你必须“手动”处理图像。我建议使用 img 元素并将 src 属性设置为 base64 编码字符串（这并非在所有地方都有效 - 但图像在多个电子邮件客户端上的显示方式很重要。）

请记住，设置最大大小很重要，因为电子邮件的大小......

单独将图像添加到 HTML 电子邮件中是相当困难的，如 在 html 电子邮件中嵌入图像

据我了解，没有适当的解决方案。

我个人创建了一封电子邮件并使用 https://app.postdrop.io/ 来测试将其发送到多个电子邮件地址并验证预期行为....