Unable to attach png image to the report. Image is shown as broken in the report

Environment (please complete the following information):

 "dependencies": {
    "@types/minimist": "^1.2.4",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@wdio/cli": "^8.26.2",
    "@wdio/config": "^8.26.2",
    "@wdio/cucumber-framework": "^8.26.2",
    "@wdio/dot-reporter": "^8.26.2",
    "@wdio/globals": "^8.26.2",
    "@wdio/junit-reporter": "^8.26.2",
    "@wdio/local-runner": "^8.26.2",
    "@wdio/spec-reporter": "^8.26.2",
    "@wdio/static-server-service": "^8.26.2",
    "eslint": "^8.56.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-wdio": "^8.24.12",
    "http-server": "^14.1.1",
    "jest": "^29.7.0",
    "jest-circus": "^29.7.0",
    "jscodeshift": "^0.15.1",
    "multiple-cucumber-html-reporter": "^3.5.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.1.1",
    "ts-jest": "^29.1.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3",
    "wdio-cucumberjs-json-reporter": "^5.1.8",
    "webdriverio": "^8.26.2",
    "xunit-viewer": "^10.5.1",
    "wdio-image-comparison-service": "^5.0.3"
  }

Config of webdriver.io and the reporter

buildConfig.afterScenario = async function (world, result, context) {
    if(!result.passed) {
        const diffImagepath = join(process.cwd(), `./screenshots/diff/desktop_chrome/abc.png`);
        await cucumberJson.attach(await diffImagepath, 'image/png');
    }
}

onComplete: async (): Promise<void> => {
        // Generate the report when it all tests are done
        let date = new Date();
        generate({
            jsonDir: `${process.cwd()}/report`,
            reportPath: `${process.cwd()}/report/cucumber-html-report`,
            openReportInBrowser: true,
            disableLog: true,
            saveCollectedJSON: true,
            reportName: 'Sanity Tests Report',
            customData: {
                title: 'Picart Web Sanity Tests Report',
                data: [
                { label: 'Project', value: 'AQA-PICART-AUTOMATION' },
                { label: 'Environment', value: global.env },
                { label: 'BaseURL', value: global.baseUrl },
                { label: 'Platform', value: process.platform },
                { label: 'Date', value: date.toLocaleDateString() }
            ]}
        });
    },

Describe the bug Image is broken in the generated report for the attach diff image. Image is there in the location. Double checked the path to the image is correct. Scrrenshot attached for the inspect below.

Normal screenshot of browser is attach successfully as expected.

<img class="screenshot" src="data:image/png;base64,/Users/sumitsoman/Documents/Project/Reason/aqa-picart-automation/screenshots/diff/desktop_chrome/picart-container-US-USD--1440x885.png">

if i remove "data:image/png;base64," from above html , image gets rendered correctly but i believe this approach is incorrect.

Appreciate your help. Let me know if you need more information.

[Include code or an example repository that can easily be set up]

Expected Attached image should render correctly from the path.

webdriverio-community / wdio-cucumberjs-json-reporter

Unable to attach png image to the report. Image is shown as broken in the report #397