png images in html content are not showing up on gmail client for the email sent from java program

Question

I am trying to send html content from java program to gmail/outlook using sendgrid.

I used base64 code in html in place of image and email on outlook is showing properly as expected, but on gmail, it was getting clipped due to base 64 image code.

After I tried png image path given in below html. now on gmail, content is showing up but images are blank. how can i resolve the issue.

below is the html and code.

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="em_full_wrap" bgcolor="#ffffff" style="table-layout:fixed;">
  <tr>
    <td align="center" valign="top"><table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="width:600px; table-layout:fixed;">
        <tr>
          <td align="center" valign="top" ><a href="https://www.testexample.com/" target="_blank" style="text-decoration: none;"><img src="emails/header_img.png" width="600" alt="TESTEXAMPLE &#62; &#174; | ComericA Bank &#174;" label="testexample_header" border="0" style="display: block; max-width: 600px; font-family: Arial, sans-serif; font-size: 14px; line-height: 16px; color: #000000;" class="em_full_img" /></a></td>
        </tr>
      </table></td>

I am using below code to send email.

        
        EmailParams emailParams = new EmailParams();
        Content content = new Content();
        content.setType("text/html");   
        content.setValue("<htmlcontent as a string>");
        List<Content> contents = new ArrayList<Content>();
        contents.add(content);
        EmailObject from = new EmailObject();
        from.setEmail("no-reply@testexample.com");
        EmailObject to = new EmailObject();
        to.setEmail("test@gmail.com");
        List<EmailObject> tos = new ArrayList<EmailObject>();
        tos.add(to);

        Personalization personalization = new Personalization();
        personalization.setSubject("subject");
        personalization.setTo(tos);
        List<Personalization> personalizations = new ArrayList<Personalization>();
        personalizations.add(personalization);
         
        emailParams.setContent(contents);
        emailParams.setFrom(from);
        emailParams.setPersonalizations(personalizations);

        final String requestJson = objectMapper.writeValueAsString(emailParams);
        final HttpEntity<String> requestHttpEntity = new HttpEntity<String>(requestJson,
                getHttpHeaders(MediaType.APPLICATION_JSON, MediaType.APPLICATION_JSON));
        final String endPointUri = new StringBuffer(<SENDGRID_URL>).toString();
        final ResponseEntity<String> messageResponse = restTemplate.exchange(endPointUri, HttpMethod.POST,
                requestHttpEntity, String.class);
    
        return "success";
      }
private HttpHeaders getHttpHeaders(MediaType contentType, MediaType accept) {
        final HttpHeaders httpHeaders = new HttpHeaders();
        httpHeaders.setAccept(Collections.singletonList(accept));
        httpHeaders.setContentType(contentType);
        httpHeaders.setBearerAuth("<bearer token value>");
        return httpHeaders;

    }```

You could use the `base64 encoded` string for the image source — Professor Abronsius, Sep 24 '21 at 15:38
I already used. but gmail is not supporting base64 string and it clips entire email showing only base64 string in entire email body — KJ21, Sep 24 '21 at 15:52
You could try sending it as an attachment or adapt the code here to suit your needs: https://stackoverflow.com/questions/38599079/sendgrid-emailing-api-send-email-attachment. — Alias Cartellano, Sep 24 '21 at 19:29

score 0 · Answer 1 · answered Sep 27 '21 at 01:42

Twilio SendGrid developer evangelist here.

You should send the image as an attachment and use a CID (content ID) to reference the image in the content of the email.

You can create the attachment with code like this:

    Attachments attachments = new Attachments();
    attachments.setContent("BwdW"); // Insert actual content here
    attachments.setType("image/png");
    attachments.setFilename("banner.png");
    attachments.setDisposition("inline"); // This means it can appear inline
    attachments.setContentId("banner"); // This sets the CID
    emailParams.addAttachments(attachments);

You can then refer to the image using the CID in an <img> tag like this:

<img src="cid:banner" />

See this article on embedding images in emails and this kitchen sink email example in Java for more details.

png images in html content are not showing up on gmail client for the email sent from java program

1 Answers1