Static Files

Since people reading your email don't have access to your local filesystem (hopefully), they won't be able to see locally referenced images and other files. One (perfectly valid) solution is to only use hosted images, or to manually upload images to the cloud before using them.

An easier approach is to rely on the public folder of your brail project. Once deployed, with most frameworks, the public folder becomes hosted and thus email-readers can see such files. However ensure the files are referenced using an absolute URL, not a relative URL.

For example, in next.js with a file public/my-image.png, you can reference it like so:

const baseUrl = process.env.VERCEL_URL ?? 'http://localhost:3000'
 
<Email>
	<Image src={`${baseUrl}/my-image.png`}>
	{/* The @brail/react <Image/> component will also validate the URL is absolute */}
</Email>

Once deployed, these images will be publicly visible. For tips on viewing images while sending test emails, view the testing emails guide