Using Image NextJS tag will cause unexpected behavior

[alescrocaro]

When using the <Image /> tag (next/image) inside the target html, the downloaded image is generated with duplicated images after the first download.
Downloading it one time works fine, but when i try to download the image again, some images within the html are duplicated.

Expected Behavior

• Each different image inside my target html is rendered by its src;

Current Behavior

• If my target html has more than 1 Image (next), some of than use the src of another one instead its own

Possible Solution

Steps To Reproduce

1. ...
2. ...
3. ...

Error Message & Stack Trace

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

Additional Context

Your Environment

• html-to-image: 1.11.11
• OS: Ubuntu 21.10
• Browser: chrome 106.0.5249.61
• next: 12.3.1

[biiibooo]

👋 @alescrocaro

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.

[alescrocaro]

Using the <img /> tag works fine tho

[donpark]

This issue still happens with latest Next, React, and @xyflow/react, frequently enough to a problem but not consistently reproducible.

BUT, I was also looking at Next Image tag size related warning issue [1] and tried specifying width and height in element attribute as well as in style of the <Image> tag. That removed the warnings as well making this bug strike less often. Timing relating I think.

1. Image warning issue - If you use CSS to change the size of your image, also include the styles 'width: "auto" or 'height: "auto"' to maintain the aspect ratio vercel/next.js#56025

[donpark]

Did some digging. My suspicion didn't pan out but setting includeQueryParams option to true seems to fix the problem.

This makes sense because Next Image components' image URL share the same path to image API endpoint and differs only in query parameters. Since includeQueryParams is false by default, effective URL for all the Next image components will be same, just /_next/image.