How to load local image in Next JS 14 ?

[aryaadinulfadlan]

Hello everyone, thank you for this awesome library!
I am starting a new project using Next JS v14.1.3 and React Email v2.1.0
I want to create an email template in my project, where the email needs to load a local image in my project directory.
I have tried several ways such as using next/image or Img component from this library. but it hasn't worked yet.

Thanks in advance, Happy coding!

[bertoldoklinger]

Have you tried to put in the public folder? If it's still not rendering, you can upload your local images on a supabase bucket or S3/any cdn and point it to the url

[gabrielmfern]

We have a section in the docs for the CLI on this. Take a look at https://react.email/docs/cli#where-can-i-place-my-static-files-for-previewing

In the case of NextJS you will need to have your assets both in your public folder, and in your email/static, and then you should have something like, in the case of hosting on Vercel:

const baseUrl = process.env.VERCEL_URL
  ? `https://${process.env.VERCEL_URL}`
  : "";

export default function Email(props) {
  return (
    <div>
      <img src={`${baseURL}/static/email-logo.png`} />
    </div>
  )
}

[cotwitch]

@gabrielmfern For solely testing purposes (as base64 uri compatibility for images is very low) I would like to import raw data of image, encode it as base64 uri string and use it in <img src={'data:image/jpeg;base64,[encoded_data]'} />.

Unfortunately, when I require or import JPG image I got ERROR: No loader is configured for ".jpg" files.
So, how can I enable importing images files for "further processing" (i.e. encode it as base64 string) ?

[gabrielmfern]

You can't really import images currently, that would require us to handle storing them for you somehow. But, if you are only worried about this code running in a Node environment, you can run just read it with fs and use any other Node modules to aid in this.