Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
GiovannyRamirez opened this issue Jan 13, 2023 · 7 comments
Open

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

GiovannyRamirez opened this issue Jan 13, 2023 · 7 comments
Labels
bug Something isn't working

Comments

@GiovannyRamirez
Copy link

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 GiovannyRamirez added the bug Something isn't working label Jan 13, 2023
@ronak-betaflux
Copy link

Any resolution so far ?

@GiovannyRamirez
Copy link
Author

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

@iRoachie
Copy link

Add this in your css:

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

@sumilraweng
Copy link

getting same Error

@GiovannyRamirez
Copy link
Author

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

@nishant-oziva
Copy link

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

@nayanbari
Copy link

Hello,

What if we fetch images from an external source using URL?

Only Because of this image issue, we are using EC2 instead of the much cheaper lambda.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@iRoachie @GiovannyRamirez @nishant-oziva @sumilraweng @nayanbari @ronak-betaflux