Image with Background Url is not working while using html-to-image

[sakshi041]

Image with Background image Url is not working while using toBlob method of html-to-image library eg: <div style =" background-image: url("https://media.istockphoto.com/photos/global-connection-picture-id1335295270");"/>

Expected Behavior

toBlob should return blob having image as well.

Just fyi, it's is working if we use img tag but not with 'background-image', any solution?

[Dun-sin]

im also having this issue

[bborn]

Same here.

[vivcat[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[salao-na-mao-developer]

Same Here!

[NomadLibra]

It is because the content type of the image source is not image/png or image/jpg.

[AurelianSpodarec]

Well, I made this to false toPng(ref.current, { cacheBust: false, }) and it works. The reason being is that when that is active, it adds timestamp to the end of the URL, which will make it invalid because the timestamp is not part of the URL, so when it tries to convert the URL, it goes to the wrong URL.

Not sure if there are any side effects, but that seemed to fix.

At least when i tried it makes no difference if its ijij or png or whatever type.

[YarmolenkoD]

I tried replace png to svg and it helps me in my case.

[4rjunc]

Do we have a fix here?

[o-faro]

cacheBust: false

I tried replace png to svg and it helps me in my case.

@YarmolenkoD that's interesting. Do you mind sharing your code using toSvg? I can set a background-image using toPng with cacheBust option false but nothing shows up if I use toSVG