B4J Question Embedding non-URL image in HTML mail body

JordiCP

Expert
Licensed User
Longtime User
I have a B4J server program that must send automated Mails, with a picture and other data. The picture won't be stored in the server, so it is sent as an attachment.

I can successfully build these mails with a quite simple HTML formatting and add the picture attachment. They are correctly received con the client side.

However, if I want to embed the same picture in the HTML mail body, so that it can be seen as part of it in the relevant section, I see that some mail clients (Outlook) display them correctly, while others (GMail) simply don't.

Seems that this behavior depends on the mail client itself, but also that there is more than one option to compose them: I have tried
  • as a cid reference --> correctly displayed in outlook, but not in GMail $"<img width="400" height="640" src="cid:${p.Get("pictureName")}">"$
  • using base-64 --> not displayed in Outlook nor GMail (perhaps I'm doing something wrong)

Does anyone know of any 'composing' option so that the image correctly shown in the message body (at least with most mail clients) or is it something one must live with?
 

jahswant

Well-Known Member
Licensed User
Longtime User
Did you try this ?
B4X:
<body>
    <img style='display:block; width:100px;height:100px;' id='base64image'                 
       src='data:image/jpeg;base64, LzlqLzRBQ...<!-- base64 data -->' />
  </body>
 
Upvote 0

JordiCP

Expert
Licensed User
Longtime User
Thanks jahswant. Just tried, but same results.

The same mail is correctly visualized when it is sent to my Outlook account, but an empty square appears when I send it to my Gmail account. In both cases the attachment is available.

Strange that if I re-send the mail from the Outlook to GMail, then it is correctly visualized (with the image appearing in the mail body) but the possibility to download it or save to Drive is in that same picture, instead of where it appears usually at the bottom, as any other attachment.
 
Upvote 0

moster67

Expert
Licensed User
Longtime User
In case it is due to image blocking, you could try to add the ALT attribute to the image:
HTML:
<img alt="insert alt text here" src="image.jpg" width="250" height="250" />

I did that once for a landing page that registered users and then sent them an email. With this, if I recall, most images in my welcome email were shown correctly.
 
Upvote 0

JordiCP

Expert
Licensed User
Longtime User
Thanks Mike.
Tried with no luck. Again, it is my GMail client who seems to block the images (settings are configured to always show images, even though I guess it is refered to external URL images).
Is this landing page still active so that it could be tested against a gmail client?

I wonder if it is something that is only related to how the message is composed, or also based on mail client's trust
 
Upvote 0

moster67

Expert
Licensed User
Longtime User
Is this landing page still active so that it could be tested against a gmail client?
Unfortunately not - it was one of those projects that I wanted to try out but due to lack of time, I never got around to finish it.
I should still have the code of my B4JServer, which sends the emails via SMTP, somewhere, and the html-template I used.
I will look for it later (I am not home today) and then get back to you, probably tomorrow.

I am just wondering about this statement:
The picture won't be stored in the server, so it is sent as an attachment.
Does this mean that the img source tag is not pointing to an IP-address bur rather an attached image?
 
Upvote 0

moster67

Expert
Licensed User
Longtime User
Had a quick look and found the post linked below. It was written in March so I guess it is possible.

HTML:
msg.add_related(img.read(), 'image', 'png', cid='\<image1\>'
Note the brackets around <image1\>

 
Last edited:
Upvote 0

JordiCP

Expert
Licensed User
Longtime User
Thanks for trying. but with the brackets it didn't work.

Will let it rest for a while, it's consuming me too much time :)
 
Upvote 0
Top