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

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.

MIT License

5.39k stars 503 forks source link

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

Open ljwswust opened 3 months ago

ljwswust commented 3 months ago

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

政务 (9)

Which aspects should I consider to troubleshoot the problem?。

vivcat[bot] commented 3 months ago

👋 @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 commented 3 months ago

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

blacktunes commented 2 months ago

You can convert the images to base64

Westbrooke117 commented 1 week ago

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>)