Next.js: How to properly set image URL into HTML so image shows in email template

Question

I am making an email template in nextjs. I'm currently trying this approach for adding the logo to the email template:

 const emailHTML = verifyEmailTemplate
      .replace('{{ subject }}', subject)
      .replace('{{ code }}', code)
      .replace('{{ logoURL }}', 'https://fakeURL.com/images/logo/logo-dark.png');

...

const verifyEmailHTML = `
<table role="presentation" class="main">
    <!-- START MAIN CONTENT AREA -->
    <tr>
    <td class="wrapper">
        <table
        role="presentation"
        border="0"
        cellpadding="0"
        cellspacing="0"
        >
        <tr>
            <img
            class="logo"
            src="{{ logoURL }}"
            alt="Logo"
            />
        </tr>
...

but it is not loading the image in the emails. This leads me to a couple questions. Is this the best approach for adding images to an email template? Should I embed the image first or does it not matter? Would a better approach be to access the image from the public directory in my nexjs project? Am I just doing this completely wrong? Thanks!

I've tried the above approach, tried to access the image from the public directory that also has the image and tried putting the image URL directly into the html.

Answer 1

Check if the email client is blocking images by default and if you need to enable them manually.