Why isn’t the image resource specified in border-image-source being downloaded during the process of converting the DOM element to an image?

[ljwswust]

**html **

<div class="decorate-item" style="border-image-source: url("/static/img-templet/border-236-7ab7e7d6ce1bc4b5.gif"); border-image-slice: 35 fill; border-width: 35px; border-style: solid; background-clip: padding-box; filter: blur(0px);"></div>

expectation

practical

Which aspects should I consider to troubleshoot the problem?。

[biiibooo]

👋 @ljwswust

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.

[ljwswust]

html-to-image: 1.11.11
macOS: 13.6.4
chrome: 122.0.6261.112 (x86_64)

[blacktunes]

You can convert the images to base64

[Westbrooke117]

You can fix this by passing in the image source url as a base64 encoded image instead of a path.

e.g. instead of writing:
border-image-source: url('/path/to/image.png')
write:
border-image-source: url('data:image/png;base64,<your-image-encoded-in-base64-here>)