Where to store images | Nextjs + react-email
Unanswered
Naeemgg posted this in #help-forum
NaeemggOP
In order to use images in react-email where do we need to store them?? I have already tried storing it in
public folder as well as many other places in the project still the Img component's src isn't showing its a valid URL and falling to alt text. I'm not getting any errors as well so that I can understand what is wrong.23 Replies
Chilean jack mackerel
Hello
I can help you.
Please DM.
@Naeemgg In order to use images in react-email where do we need to store them?? I have already tried storing it in `public` folder as well as many other places in the project still the `Img` component's `src` isn't showing its a valid URL and falling to `alt` text. I'm not getting any errors as well so that I can understand what is wrong.
first you want to use either the
If you want to store it inside your public folder, that's fine. Others ways would be, that you store it in a s3 bucket or r2. Then only make sure, that you using a cdn as well, to serve your data efficent
img or the Image component. Then you want to make sure, that the url, that you enter is reachable. So try console.log your image src and visit this image by yourself. Then it should be reachable.If you want to store it inside your public folder, that's fine. Others ways would be, that you store it in a s3 bucket or r2. Then only make sure, that you using a cdn as well, to serve your data efficent
@Chilean jack mackerel I can help you.
others may also want to know the solution, so please stay in thread.
NaeemggOP
checked the URL its valid
@B33fb0n3 first you want to use either the img or the Image component. Then you want to make sure, that the url, that you enter is reachable. So try console.log your image src and visit this image by yourself. Then it should be reachable.
If you want to store it inside your public folder, that's fine. Others ways would be, that you store it in a s3 bucket or r2. Then only make sure, that you using a cdn as well, to serve your data efficent
NaeemggOP
let me console.log also
Yes its reachable
then what could be the possible issue!!!!
@Naeemgg Yes its reachable
can you open the devtools for your email? Does a webversion or something like that exists, so you can go into the devtools?
if you look at these examples
all of them are using src as
src={${baseUrl}/static/vercel-logo.png}`where baseUrl is
process.env.VERCEL_URLI tried this way also but isnt working, I know there's a small thing what I'm missing but donno what
@Naeemgg checked?
@B33fb0n3 yea, can you check this? https://discord.com/channels/752553802359505017/1264825023110184991/1264841241070407721
NaeemggOP
this is same link of the post we' re currently in
And for the images issue I have contaced react-email support and acc to them its better to put images somewhere onln and use a cdn to reach it
not locally, so I'm using images by cdn now
btw thanks man for your attention @B33fb0n3 !!! 
👍
yes, the message links to a specific message in this thread, to highlight it, because it haven't answered at this time
yes, the message links to a specific message in this thread, to highlight it, because it haven't answered at this time