generating html with inline images with mochawesome

[ToAM90]

Hi, I am currently trying to create and email a html report with screenshots via mochawesome. In order for it to be emailed, I have been trying to turn the png images into base64 to inline it into the html file. However, I am not able to do so successfully... I have tired different methods to encode the png to base64, such as FileReader, cy.readFile, fs.readFileSync, image-to-base64 npm package, etc with not much success. Wondering if theres a specific way to be able to do this for Cypress and if anyone can help.

Cypress.on('test:after:run', (test, runnable) => {
  if(test.state === 'failed' && test.currentRetry === test.retries){
    const title = test.title.replace('.', "").replace('#', '%23');
    const parentTitle = runnable.parent.title.replace(".", "");
    const filePath = (test.retries == 0) ? 
      `${Cypress.config('screenshotsFolder')}/${Cypress.spec.name}/${parentTitle} -- ${title} (failed).png`
      : `${Cypress.config('screenshotsFolder')}/${Cypress.spec.name}/${parentTitle} -- ${title} (failed) (attempt 2).png`;
    const fs = require("fs")
    const pngAsBase64 = fs.readFileSync(filePath, "base64")
    addContext({ test }, "data:image/png;base64," + pngAsBase64);
  };
})