svelte-email icon indicating copy to clipboard operation
svelte-email copied to clipboard

[Question] How to use assets or static files when using <Img>

Open socketopp opened this issue 1 year ago • 2 comments

Currently I use an url that is pointing to my image. But I can't figure out how to include a static image. Would really appreciate if anyone could provide an example how to embed static images to the email template.

socketopp avatar Dec 26 '23 19:12 socketopp

@socketopp

You can import the import the image than use it directly in src. An example would be below:


import ghost from '/ghost.png' // This will be the path to your static image

<Img src={ghost} />

cmjoseph07 avatar Mar 07 '24 16:03 cmjoseph07

@socketopp

You can import the import the image than use it directly in src. An example would be below:

import ghost from '/ghost.png' // This will be the path to your static image

<Img src={ghost} />

I tried that but it didn't work

import email_logo from './logo_mail.png';
...
<Container style={headerContainer}>
  <Link href={baseUrl} style={{ height: 'fit', textAlign: 'center' }}>
    <Img src={email_logo} alt="logo" style={image} width="160px" height="22px" />
  </Link>
</Container>

In gmail, it points to some 404 google endpoint https://ci3.googleusercontent.com/meips/[:id]..-ft#http:///src/lib/emails/templates/logo_mail.png?t=151515158158

socketopp avatar Jun 05 '24 10:06 socketopp