Posted: 9 Aug 2020 17:18 EDT Last activity: 14 Aug 2020 14:26 EDT
Image in email body not coming/rendering in outlook
I have a requirement to show case information on top of an image in Outlook email. I was able to glossify all the information that is needed in case and able to see in outlook email, except image in background.
I tried all sort of possible options such as,
1. image src. With this image comes but as standalone, beneath tah case information comes
2. Added image in background/background-image (url) attribute in CSS class and tried using in div, but failed to get image in outlook email,
3. Tried adding image in Pega section HTML section, failed
In all the above options - email attachment in case renders image in email body background. Since its browser so it may be working.
But ideally in outlook email image should come in background and on top of it all case information should be seen.
Please share some insights on this issue, find below a sample HTML code which i am using.
I am sharing here some of the best practices for HTML email. Missing one of these might have caused the issue.
Make sure the Image is sourced from HTTPS site. (Eg : https://1.bp.blogspot.com/-2S-qYg_y5bQ/XzDYuWFag3I/AAAAAAABiT8/2-A3U6mtyxYxT8E2-S5LYR2_QuSWgTFNACLcBGAsYHQ/s640/nature-desktop-background-1691.jpg)
It is highly recommended to inline CSS used in the HTML. You can use online tools for this. Here is the example after transforming to inline :
when we tried to upload the image as binary file and refered it in HTML . we had a similar issue
Forward same mail to gmail and check if image is displayed there . ( an extra red warning will be displayed with mail) Then this might be the because the image is not from trusted source.
We tried with image content . It worked for us.
Go to Records->Technical->Image Content. Create the image content - Upload the image there , Now the image gets saved in a path in server.
Let us know if it worked.
Note: don't forget to deploy the image content rule in next environment
HTML : <img height="70" src="../datacontent/Image/rteImages/myLogo.png" width="300" />