NextJS Image issue

[kaloyanBozhkov]

Expected Behavior

I should be able to convert as many HTML elements with < Image /> inside as I want, and get dataURLs with the correct inner < Image /> alongside anything else in the same element.

What happens instead

Instead, toPng returns the dataURL for the first image within the Div that was converted to dataURL and downloaded. If an image is loaded through a regular < img/> or as a background-image, there is no problem. But if it is loaded with a < Image /> (from Next's "next/image"), then the resulting dataURL will always use the< Image /> of the first Div element that was converted toPng.

Possible Solution

The workaround I am going with currently is to load the image as a < img /> instead of using Next's < Image />, but it's obviously a suboptimal solution.

I considered that maybe some caching issue was causing this, but not that I could find with just a quick investigation.

Steps To Reproduce

given 2 images served through NextJS's "< Image /> ("next/image")
-> get dataURL through toPng and download image .1
-> get dataURL through toPng and download image .2

The two dataURLs returned should be the same, provided nothing else within the element, that is toPng'd, differs.

Additional Context

My element is as follows:

A page has multiple of the above element, which I want to toPng and download.
The .blurredImg is what is not being outputted correctly through toPng with the 2nd+ runs
The parent element has a before pseudo class which adds a border of sorts.

Your Environment

"html-to-image": "^1.11.11",
"next": "13.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",

Browser: chrome (latest)

[biiibooo]

👋 @kaloyanBozhkov

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[solnishshka]

Hi! Faced a similar problem in next js. The inclusion of "includeQueryParams: true" in the list of options helped me solve it.

[kaloyanBozhkov]

That works! I tested and can confirm.

Add "includeQueryParams: true" to toPng's options solves it.

[intuity-hans]

Can also confirm that this works 🎉

[eliobricenov]

OMG I was stuck on this for hours. This is solution! It seems nextjs relies on the query parameters to get the right image. Thank you so much!

That works! I tested and can confirm.

Add "includeQueryParams: true" to toPng's options solves it.

[dtong12]

yep that was the fix!

[SimRunBot]

if you still find yourself having a CORS error after this and images not appearing in your screenshot this is for you