I am using .setContent() method of puppeteer to set the content of a page. I am reading a png image as:
var image = fs.readFileSync('some_image.png'); // image is a buffer object
The below code works as image template variable is replaced by its value in htmlstring string:
main.js
var image = fs.readFileSync('some_image.png');
const htmlString = `
<html>
<head><meta http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<body>
<div>
<img src="data:image/png;base64,${image.toString('base64')}" width=960 height=750></div>
</body>
</html>`;
await page.setContent(htmlString);
Now I dont want to declare htmlString variable in my main.js instead want to keep that in a separate file and somehow use that in my main.js
For this I tried
creating a pages.html file with the html content as below
pages.html
<html>
<head><meta http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<body>
<div>
<img src="data:image/png;base64,${image.toString('base64')}" width=960 height=750></div>
</body>
</html>
in my main.js
var image = fs.readFileSync('some_image.png');
var htmlfromfile = fs.readFileSync('pages.html').toString();
this does not work and my img tag still has "data:image/png;base64,${image.toString('base64')}" and not the buffer value of image in it. How do i get this working ?