toPng keeps generating the first downloaded ref even though refs passed are different

[callmejumeh]

The problem is straightforward.
I have a list of refs linked to a div each (1 div = 1 ref).

Let's say 3 divs with a ref each.

When I convert div1 toPng for the first time - everything works, the image represents div1.

But after the first download if I try to download another div (div2 for example), it generates div1 again.

I have checked my ref right before converting toPng and the correct div/ref is being passed.

Expected Behavior

toPng should generate the ref passed in arguments

Current Behavior

toPng generate the ref passed as argument for the first tine only.
Then it keeps generating the first downloaded ref even though the ref passed in argument is different.

Possible Solution

html2canvas managed to do the job so I assume nothing is wrong with my refs.

Steps To Reproduce

1. Create a list of refs linked to a list of divs
2. Convert toPng div1 (refList.current[0])
3. Downloaded image should represent div1
4. Now convert toPng div2 (refList.current[1])
5. Downloaded image should represent div2 but ends up representing div1 again

Error Message & Stack Trace

<!-- Provide a log message if relevant -->

Additional Context

Would be happy to compensate the genius mind that would fix the issue ;)

Your Environment

• html-to-image: 1.11.11
• OS: macOS Ventura 13.2.1
• Browser: Chrome 116.0.5845.140

[vivcat]

👋 @callmejumeh

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.

[callmejumeh]

The issue is coming from the fact that the image inside the div is a next Image component.

Using backgroundImage works.

Is there a reason why with next Image component, toPng cannot process it?

[nut-n]

Hi, @callmejumeh

I stumbled upon this issue recently and I believe the underlying cause is the same.

Assuming that you're using the default loader for your Next.JS <Image /> component.

Next.JS <Image /> component set the src and srcset attributes of the <img /> element to the same URL pathname for every images. The URL search params does change according to the image being loaded.

For example, the /_next/image part stays the same.

/_next/image?url=https%3A%2F%2Fexample.com%2Fimages%2Fairline_logo%2F70px%2FSL.png&w=3840&q=75

I suspect that html-to-image has a global cache that caches the images using the pathname only. That’s why html-to-image includes the includeQueryParams option.

Setting includeQueryParams to true should resolve your issue.

[jinsignares]

You guys are life savers! Setting includeQueryParams to true did resolve the issue. Thanks a ton! @nut-n

[theDanielJLewis]

THANK YOU for raising this question and the solution!

I was also running into this problem. Except in my case, I would have multiple Image components in my div, but they would sometimes render as the images.

But setting includeQueryParams: true worked for me, too.