I need help with sending styled emails that contain images.
Currently, I am utilizing the renderToString method to pass props into my component. So far, everything is functioning correctly in the API routes.
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 {
// Passing 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});
}
}
The Quotes component receives the props and applies the styles as intended. However, there seems to be an issue with displaying the image. Is there a problem with the method?
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