Adding Local Image to C4C Workflow E-mail Template

abimanyu_g · ‎2023 Jul 11

Hello everyone!

This blog post explains how to add the local image file into HTML code of E-mail template in SAP Cloud for Customer workflows.

We can give an image link into the <img> tag of HTML code like below.

<img src="https://1000logos.net/wp-content/uploads/2023/07/SAP-Logo-768x432.png" alt="SAP Logo">

When the e-mail sent to recipient, it will display the actual image of the respective link. We all know this above way to add image.

Why this blog post?

According to SAP KBA 2675069; If E-mail template contains images, then image files should be stored on a publicly accessible image server. Images stored in local system, would not be reflected.

Providing link in the <img> tag will display the actual image is fine.

But in some rare case, customer will not provide you the links/URLs. Instead, they will share you the local image file in any formats (.jpg, .jpeg, .png, etc.).

In this kind of scenario, how we can achieve this? Let's settle this out below.

How to Achieve?

If your customer provides you the image file instead of URL, then first we have to convert the image that our HTML code can understand.

The src attribute in the <img> tag specifies the URL or path of the resource file. It can also handle the Base64 code of an object (refers to any files).

Let's see below, how to encode the image to Base64 and how to add it into the HTML code?

The Solution:

1. For conversion you can use any online encoder. For this blog purpose, I am using Convert Image to Base64 Online | Base64Encoder

2. Upload your local image file. It will provide the encoded Base64 code for uploaded image.

Base64 Encoder Website

3. Copy the Base64 Image Source code and paste it in the src attribute of <img> tag like below.

<img src="PLACE_THE_COPIED_BASE64_CODE" alt="Alternative Text for Image">

Now when a e-mail sent to the recipient, the <img> tag will automatically decode the Base64 code, and it will display as an original image.

Sample Output:

I have created a sample workflow to show you the result.

Result (*Image taken from 1000logos.net website*)

That's all. We achieved it.

The Base64 code value will be huge. But don't worry about it.

My Other Blogs:

I hope that this blog post helps you with local image requirement like adding customer logo into workflow mail.

Thanks for reading and kindly share this with your circle. Feel free to provide your feedback and questions in the comment section.

If anyone have an alternative solution, kindly let us know.

See You Soon👋🏻,
Abimanyu G