Background image for div is not loaded

[kkfin]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 0.13.0
• Platform / OS version: Ubuntu 17.10, node 6.12.0 (local dev environment, production code will run in AWS (CentOS, Node 6 etc.))

What steps will reproduce the problem?

1. CSS definition

.main {
  background: url('../img/bg-image.jpg') no-repeat;
}

h1  {
  color: red;
}

p {
  color: green;
}

2. JS code

...
puppeteer.launch({headless: true})
  .then(browser => {
    browser.newPage()
      .then(page => {
        page.setContent('<div class="main"><h1>Title</h1><p>Some text</p></div>')
	      .then(() => {
	        page.addStyleTag({path: '...'})
		      .then(() => {
		        page.screenshot({path: '...', type: 'jpeg', quality: 100})
				  .then(() => {
				    browser.close()
				  })
		      })
	      })
      })
  })
...

The HTML code will be generated, text above is just a simple example.

What is the expected result?
JPG file of the web page with image as background.

What happens instead?
A JPG file is created correctly but no image on the background of the web page. The other style definitions in CSS (for H1 and P) are handled correctly i.e. the text colors are correct in generated JPG file.

If I define the image in CSS as base64 coded ASCII

.main {
  background: url(data:image/jpg;base64,...) no-repeat;
}

the image on the background of the web page is shown correctly.

I've tried all kinds of path settings for the background image in CSS (absolute and relative) with no success.

Defining images as Base64 ASCII makes CSS file quite large (as we have several images on pages) so referring to them using just path would be nice.
Am I missing some definition from somewhere so the images would be loaded using path setting in CSS?

[vonGameTheory]

Is this a local file on your machine? If so, sounds similar to question #1472 -- you are trying to load in a local file as in-page resource and you just can't do that. (A web page cannot and should not be able to access your local files.) But as I mentioned in the other thread, you could easily set-up a simple server in node to serve the files to you in the way the browser expects.

[kkfin]

Yes, all my files are local.
I did get node server to serve the image files (*.jpg) but this seems not to work with fonts.

This works in CSS:

.main {
 background: url('http://localhost:1234/img/bg-image.jpg') no-repeat;
}

But this doesn't:

@font-face {
  font-family: 'Truetype font family name';
  src: url('http://localhost:1234/fonts/truetype-font-file.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

The font is loaded but it does not look correct when viewed thru dev tools sources tab. Font file type (woff etc.) does not make any difference. Using base64 ASCII as font source does work.

[vonGameTheory]

Hmm, but it is at least loading it? Try checking/setting that the local server is sending the correct content-type header for the font type (for truetype I think it is "font/ttf" now, but it used to something else which should still work). If it is wrong, it might possibly screw up the rendering.

If that works and you are serving up lots of different file types, you might want a more full-fledged local server that will take care of all that for you. There are a number of web server node packages of various complexity, but I haven't tried them. You could also install a full php-enabled Apache setup with something like The Uniform Server pretty quickly.

[ebidel]

@kkfin, as @vonGameTheory points out, this looks related to your setup. If you want to test against a local page with local resources, you probably want to setup a server and use page.goto to navigate to load that page.