chrome-aws-lambda icon indicating copy to clipboard operation
chrome-aws-lambda copied to clipboard

Published 20 hours ago • verified publisher icon alixaxel

[BUG] Images are not rendering in img tag or background-img

Open GiovannyRamirez opened this issue 2 years ago • 8 comments

Environment

  • chrome-aws-lambda Version: 10.1.0
  • puppeteer / puppeteer-core Version: 10.4.0
  • OS:
  • Node.js Version: 14.x
  • Lambda / GCF Runtime: node14.x

Expected Behavior

  • src on img tag must to render when images are in the project not only with url's.
  • image could be in a S3 bucket and the lambda has permission, but, neither is render the image.

Current Behavior

  • Image path even in same folder at the template is not working, show alt text

Steps to Reproduce

const chromium = require('chrome-aws-lambda');

exports.handler = async (event, context, callback) => {
  let browser = null;

  try {
    browser = await chromium.puppeteer.launch({
      args: chromium.args,
      defaultViewport: chromium.defaultViewport,
      executablePath: await chromium.executablePath,
      headless: chromium.headless,
      ignoreHTTPSErrors: true,
    });

    let page = await browser.newPage();

    await page.await page.setContent(
            `
            <style>
                body {
                    background-image: url("image2.jpg");
                }
            </style>
            <body>
                <img src="image.png alt="Alt"/>
            </body>
            `
            { waitUntil: ['load', 'domcontentloaded', 'networkidle0']}
        );

    const pdf = await page.pdf({
      format: "Letter",
      printBackground: true,
    });
   return pdf.toString('base64');
  } catch (error) {
    return callback(error);
  } finally {
    if (browser !== null) {
      await browser.close();
    }
  }

  return callback(null, result);
};

Possible Solution

GiovannyRamirez avatar Jan 13 '23 23:01 GiovannyRamirez

Any resolution so far ?

ronak-betaflux avatar Feb 17 '23 12:02 ronak-betaflux

Not yet, in this moment I remove the images, but it is mandatory. Hopefully a solution as soon as possible.

GiovannyRamirez avatar Feb 17 '23 13:02 GiovannyRamirez

Add this in your css:

body {
  -webkit-print-color-adjust: exact;
}

iRoachie avatar Apr 20 '23 16:04 iRoachie

getting same Error

sumilraweng avatar Sep 06 '23 11:09 sumilraweng

By now, I convert the images into svg and put it inside the code.

GiovannyRamirez avatar Sep 06 '23 13:09 GiovannyRamirez

this issue is already mentioned over and over again. It's a security issue from puppeteer and does not allow you to load project level images. Here's a workaround that worked for me: https://stackoverflow.com/questions/66751136/puppeteer-does-not-load-images-stored-locally-when-generate-pdf

nishant-oziva avatar Jan 25 '24 06:01 nishant-oziva