React Native

Convert Inline Data-URL Images to Related Parts

Demonstrates the Chilkat Email.ConvertInlineImages method, which converts images embedded inline within HTML (as base64 data URLs) into multipart/related MIME parts referenced from the HTML by cid:. This example sets an HTML body containing a data-URL image and converts it.

Background: HTML can embed an image two ways: as a data: URL (the base64 bytes sit right in the src attribute) or as a related part referenced by cid:. Many email clients don't render data: URLs for security reasons, so converting them to proper multipart/related parts — the traditional email way to embed images — greatly improves how reliably the images display.

Chilkat React Native Downloads

Download Chilkat for React Native

React Native

import { Email } from '@chilkat/react-native'

function chilkatExample() {
  // Demonstrates the ConvertInlineImages method, which converts images embedded inline within
  // HTML (as base64 data URLs) into multipart/related MIME parts referenced from the HTML by
  // CID.

  const email = new Email();
  email.subject = 'Convert inline images';

  // An HTML body with a base64 data-URL image (a 1x1 PNG).
  email.setHtmlBody('<html><body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="/></body></html>');

  console.log(`NumRelatedItems before = ${email.numRelatedItems}`);

  // Convert the inline data-URL image(s) to multipart/related parts referenced by CID.

  try {
    email.convertInlineImages();
  } catch {
    console.log(email.lastErrorText);
    return;
  }

  console.log(`NumRelatedItems after = ${email.numRelatedItems}`);
}