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

GiovannyRamirez commented 1 year ago

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

ronak-betaflux commented 1 year ago

Any resolution so far ?

GiovannyRamirez commented 1 year ago

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

iRoachie commented 1 year ago

Add this in your css:

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

sumilraweng commented 1 year ago

getting same Error

GiovannyRamirez commented 1 year ago

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

nishant-oziva commented 8 months ago

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

alixaxel / chrome-aws-lambda