I am trying to convert my simple html document into image. I am using NReco.ImageGenerator for this.
But it does not show included image and styles
I am using Windows 10
Here is my code
var html = File.ReadAllText("main.html");
var htmlToImageConv = new NReco.ImageGenerator.HtmlToImageConverter();
var jpegBytes = htmlToImageConv.GenerateImage(html, "png");
File.WriteAllBytes("image.png", jpegBytes);
It is html document
In browser
My code's output
The problem is that NReco will be unable to find the file of the image in the html.
Two possible solutions that immediately come to mind.
Host the image on a valid URL or use an inline image using base64 encoding in the html.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcAQMAAAAhlF3CAAAABlBMVEX///8AAABVwtN+AAABCUlEQVRYhe3XMQ6DMAwF0I8YMuYIHIWjNUfjKByBkQGR2okTUFXaMPMttbR5TJadOIglAgB9YiwrC4iKEzT6GAb5PzvBNa3gRTT0mqn+lL61k8dOvIeSW8ARr1EqkHgfa/NuwCCN+72zH4wlFPP2VlaI//EUWn2X8Vy0TPXylasvTm7HuHR6IhAbMO1kApu9qc3rd8stMW9vegjE2p976tFAbECN4LXyZPwYLLfEA6UVc/rqhAHpT6s+4l+sMcQDbXsjhnIAaLFZ5UnDdulDbMEpJdaumLP+dvY20fB0xTzS54l3MZ8QUeeRMU//RHymr04YxFYszVvnW8svMZYbQI56CcepP4m/8Q15PctBEVIBfQAAAABJRU5ErkJggg==" />
<p class="text">Some text</p>
</body>
</html>
or use a local file url like file:///
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="file:///C:/Users/jdarling/Desktop/SO_20190718/images/back.png" />
<p class="text">Some text</p>
</body>
</html>
Related
have a problem with Live Server Updating Index.html ...
It's works when i doing manually save... working with big project, and manually update every time page is too stupid deal
in Index.html I using Iframe to navigation.html ..
pay attention when i updating navigation.html it's working , updating ...
but when i trying to update index.html .. unfortunately ...
Here Is :::
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Pam dasd adsadsa dasdsa </h1>
<iframe 1 src ="navigation.html" linkTarget = "iframe2">
<iframe2>
</body>
</html>
navigation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>agent 1 link</li>
<li>agent 2 link</li>
<li>agent 3 link</li>
<li>agent 4 link</li>
</ul>
</body>
</html>
PS : Help -> Toggle Developer Tool , showing no errors, all working ok. i mean : [Extension Host] Change detected
Here is Repo:::
enter image description here
Maybe that it extension bug ? :)
PS:::
!!!Attention!!!
Without iframe tag Index.html .. Live is working well .
But i need iframe.
Is your index.html inside of a folder preceded by a period?
Does your domain look like this? http://127.0.0.1:5500/.folder/index.html
I am using CEFSharp with a LocalSchemeHandler.
I have the following directory structure in a css directory.
semantic-2.1.8.min.css
icon.min.css
themes
-- default
-- assets
-- fonts
icons.eot
icons.otf
icons.svg
icons.ttf
icons.woff
My html page looks like this
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="../css/semantic-2.1.8.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="../js/semantic-2.1.8.min.js"></script>
...
I make a request of semantic like this
iconElm.addClass("star half empty red");
an empty red box will be displayed.
By VS debugging I have determined that the semantic css file is requested, and semantic loads in the page. The icon files aren't requested, and don't display.
I have a WPF with a browser control that points to a local HTML file.
I have my .html and .css files in a folder labelled WebResources but it seems no matter how I link the stylesheet in the index.html file the styling doesn't show.
My Solutions Explorer
Solution MyProject
-- MyProject
---- Properties
---- References
---- WebResources
---- Index.html
---- Style.css
Index.html
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="WebResources\Style.css" />
<!-- Also Tried "<link rel="stylesheet" href="Full\Path\To\Style.css" /> -->
</head>
<body>
<div class="container">
<h1>This should be very big</h1>
</div>
</body>
</html>
Style.css
h1 {
font-size: 10em;
}
If index.html and Style.css are in the same folder you should use:
<link rel="stylesheet" href="Style.css" />
I just tried with a test app and it works well.
Let me know.
Have you tried forward-slashes (/)? html pages usually reference other resources with these rather than Windows-style back-slashes
I´ve downloaded tweeter bootstrap (not the bootststrap for MVC) to a brand new MVC4 project, but I can´t make it work.
No errors in browser´s F12 window.
Here is my _layout code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="#Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
</head>
<body>
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<h1>Hello, world!</h1>
#RenderBody()
</body>
</html>
When the screen pops up, I get a normal Hello, world! body (no bootstrap fonts). My system has the following files:
What may I be doing wrong?
You only included the bootstrap-theme.min.css file and not the base bootstrap.css file. (though you did include the bootstrap.js file)
While I'm using Response.Redirect("~/Pages/Page.aspx"), style is loaded on the page, but unfortunately it is not loaded while I'm using Server.Transfer("~/Pages/Page.aspx") method.
The page looks following:
<html>
<head runat="server">
<link href="../Css/Layout/style.css" type="text/css" rel="stylesheet" />
</head>
<body></body>
</html>
How to make the page load style.css using Server.Transfer() ?
Regards
The problem is that you use a relative path to your CSS file, you should use an abolute path.
If the css folder is inside your application root, you can use
<html>
<head runat="server">
<link href="/Css/Layout/style.css" type="text/css" rel="stylesheet" />
</head>
<body></body>
</html>
or even
<html>
<head runat="server">
<link href="~/Css/Layout/style.css" type="text/css" rel="stylesheet" runat="server" ID="aUniqueId" />
</head>
<body></body>
</html>