BerndGabriel / HtmlViewer

The well-known Delphi/Lazarus HtmlViewer/FrameViewer
Other
398 stars 147 forks source link

Draw CSS-embedded images #309

Closed kandys closed 3 years ago

kandys commented 3 years ago

test.css: .logo { width: 90; background-repeat: no-repeat; background-position: center; background-image: url('data:image/png;base64,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'); } test.html: <html> <head> <link rel="stylesheet" href="test.css"> </head> <body> <table><tr><td class="logo"><br><br><br><br></td></tr></table> </body> </html>

We do not see an image.

BerndGabriel commented 3 years ago

Thanks for spotting this issue.

Commit https://github.com/BerndGabriel/HtmlViewer/commit/2416ce07fea1339e86c1512e0822697c1da9d016 fixes it in the master branch. This commit is based on your solution but is more general, as it does not add the path to any kind of absolute paths that start with aprotocol like 'data:' in 'data:image/...'.