Skip to content
This repository has been archived by the owner on Jan 2, 2023. It is now read-only.

Cannot recognize html img tag style if add img tag dynamically #5295

Open
CY-Qiu opened this issue Dec 30, 2022 · 0 comments
Open

Cannot recognize html img tag style if add img tag dynamically #5295

CY-Qiu opened this issue Dec 30, 2022 · 0 comments

Comments

@CY-Qiu
Copy link

CY-Qiu commented Dec 30, 2022

wkhtmltopdf version(s) affected: 0.12.6

OS information
Windows 11

Description
What we want:
image
What we have under current wkhtmltopdf:
image

How to reproduce
HTML code:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
	<script>
		window.onload = function (){
			picImage = document.createElement("img");
		   picImage.src = "data:image/png;base64,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";
			picImage.alt = "picture";
			// This style is not working in wkhtmltopdf
			picImage.style="position: absolute; top: 300px; left: 200px;";
			document.body.appendChild(picImage);
		}
	</script>
</head>

<body style="height:297mm; width:210mm;background-color:white;">
</body>

</html>

Expected behavior

When add html img tag dynamically, the style should be functional.

Possible Solution

I tried to add img tag statically, if so, the style can be functional successfully. However, the img is generated dynamically in our situation, so I cannot add img tag statically.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Development

No branches or pull requests

1 participant