CODEWITHSUNDEEP
javascriptreactjsemailnext.jsresend.com
Han
Han

Reputation: 69

Resend Email not Loading Images

I have a Next.js website hosted on Vercel. I am using resend to send transactional and welcome emails to people who sign up for my service. However, whenever the email is delivered to an inbox, the image is not loading.

My image is located inside /Public/Images/Logo/main-logo.png

Is there something I am missing, how can I make the image appear on my emails?

Here is my code:

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

export const Welcome = () => (
  <Html>
    <Head />
    <Preview>The One-Stop-Shop to Mastering CardCounting</Preview>
    <Body style={main}>
      <Container style={container}>
        <Img
          src="https://cardcounter21.com/Images/Logo/main-logo.png"
          width="170"
          height="50"
          alt="LOGOOOOOO"
          style={logo}
        />
        <Text style={paragraph}>Hello Player!</Text>
        <Text style={paragraph}>
          Welcome to CardCounter, the one-stop-shop to learning how to count
          cards! Check out our hours of videos, drills and simulators on our
          website to bring your blackjack game to the next level!
        </Text>
        <Section style={btnContainer}>
          <Button style={button} href="https://www.cardcounter21.com/home">
            Get started
          </Button>
        </Section>
        <Text style={paragraph}>
          Best,
          <br />
          CardCounter21.com
        </Text>
        <Hr style={hr} />
        <Text style={footer}>
          Phone: 407-725-8214 <br />
          Email: [email protected]
        </Text>
      </Container>
    </Body>
  </Html>
);

export default Welcome;

Upvotes: 3

Views: 301

Answers (1)

Ethan
Ethan

Reputation: 1664

The image is not loading because the src of the image goes to a 404 page.

To serve the images better you should look at a service like Vercel blob since it seems like you are using Vercel.

Additionally you should add an alt to your image tags for accessibility.

Upvotes: 0

Related Questions