DinkToPdf Images are not shown

Images are not shown

Open wgutierrezr opened this issue 6 years ago • 19 comments

Hi I'm creating a PDF from Html file and the images are not shown. How can I convert an html file with images?

Feb 09 '18 18:02 wgutierrezr

Please provide HTML that you are trying to convert.

Feb 09 '18 19:02 rdvojmoc

@wgutierrezr did you use an img tag and and point the src to a https url? If so, try http if possible. Worked for me.

Feb 27 '18 14:02 Franklin89

can I add an image in the header?

here are my header settings:

        HeaderSettings = { FontSize = 12, Left = "Name", Right = "<img 
        src='http://abc.com/Images/logo.gif'/>My Compnay", Line = true, Spacing = 2.812 }

But it is rendering img tag as it is. Any ideas?

Apr 12 '18 17:04 ajitscorpio

For me, just works if I set the complete image path in the html file like this example


 omitted html code...

<img width=364 height=83 src="file:///C:/Projects/Printer/Dispatchment.API/Cartas/Model/image001.png" align=left hspace=12>

 omitted html code...

Aug 31 '18 21:08 agpcardoso

Does not work for me either

<img width="110" height="96" src="images/badge.png" /> <img width="110" height="96" src="/images/badge.png" /> <img width="110" height="96" src="~/images/badge.png" /> <img width="110" height="96" src='@Url.Content("~/images/badge.png")' />

or any of the above using <image />

it also won't pick up a relative stylesheet link

<link rel="stylesheet" type="text/css" href="css/certificates.css">
<link rel="stylesheet" type="text/css" href="/css/certificates.css">
<link rel="stylesheet" type="text/css" href="~/css/certificates.css">
<link rel="stylesheet" type="text/css" href='@Url.Content("~/css/certificates.css")'>

Even though the page shows as expected in the browser.

The Stylesheet is not extremely bad an issue, however the image is a real pain … strange how it works on the google homepage though. Is it something to do with my environment or is this a bug?

Nov 02 '18 23:11 bill-richards

Hello,

with asp.net core 2.1 app as a workaround i used

@{
    var hst = Context.Request.Scheme + "://" + Context.Request.Host;
}

<link rel="stylesheet" href="@hst/lib/bootstrap/dist/css/bootstrap.css"/>

Nov 06 '18 18:11 omr-htp

@omer-hatip
May I ask what method you used to render the razor engine. cshtml formatted as String? Sorry, this is machine translation.

Nov 29 '18 13:11 leen2175

@leen2175

I used this Extension

public static class ControllerExtensions
{
    public static async Task<string> RenderViewAsync<TModel>(this Controller controller, TModel model, string viewName = null, bool partial = false)
    {
       if (string.IsNullOrEmpty(viewName))
        {
            viewName = controller.ControllerContext.ActionDescriptor.ActionName;
        }
        controller.ViewData.Model = model;

        using (var writer = new StringWriter())
        {
            IViewEngine viewEngine = controller.HttpContext.RequestServices.GetService(typeof(ICompositeViewEngine)) as ICompositeViewEngine;
            ViewEngineResult viewResult = viewEngine.FindView(controller.ControllerContext, viewName, !partial);

            if (viewResult.Success == false)
            {
                return $"A view with the name {viewName} could not be found";
            }

            ViewContext viewContext = new ViewContext(
                controller.ControllerContext,
                viewResult.View,
                controller.ViewData,
                controller.TempData,
                writer,
                new HtmlHelperOptions()
            );

            await viewResult.View.RenderAsync(viewContext);

            return writer.GetStringBuilder().ToString();
        }
    }
}

then in controller action you can use it like :

var viewHtml = await this.RenderViewAsync(model, viewName);

Nov 29 '18 13:11 OmerHatip

@OmerHatip
thanks ! it is work for me!~

Nov 30 '18 09:11 leen2175

@rdvojmoc I have the same problem with printing images in an generated PDF file. I am using the example in code maze blog. (https://code-maze.com/create-pdf-dotnetcore/). I tried all the possible ways I know to show an image, but without any result. Any help? thanks.

Example: var objectSettings = new ObjectSettings { PagesCount = true, HtmlContent = templateGenerator.GetHtmlString(id), WebSettings = { DefaultEncoding = "utf-8", UserStyleSheet = Path.Combine(Directory.GetCurrentDirectory(), "Assets", "Styles.css"), LoadImages = true }, };

Dec 02 '18 12:12 Lemraj

Problem is in your <img src='/Assets/logo.png' />. This is relative path, for this to work you will need to provide absolute path to the image for example <img src='http://localhost:5000/Assets/logo.png' />

Dec 02 '18 13:12 rdvojmoc

Thank you for the quick response! I appreciate it. Your suggestion did work for me! Thanks a lot! I also had to enable serving files from the \Assets folder located under the root folder of the site.

This is the Startup code for enabling multiple web roots:

// Enable serving files from the configured web root folder (i.e., WWWROOT)
app.UseStaticFiles();

// Enable serving files from \Assets located under the root folder of the site
app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(
    Path.Combine(Directory.GetCurrentDirectory(), @"Assets")),
    RequestPath = new PathString("/Assets")
});

Dec 02 '18 14:12 Lemraj

Problem is in your <img src='/Assets/logo.png' />. This is relative path, for this to work you will need to provide absolute path to the image for example <img src='http://localhost:5000/Assets/logo.png' />

@rdvojmoc can we set resolveRelativeLinks to true in dinkToPdf?

Dec 14 '18 06:12 aspgirl

I use base64 image in html content ,not url; like this;

pdf display:

html display:

those images can display in html. but not display in pdf. how resolve ? thank you!

Apr 13 '19 13:04 wangweinjcn

I use base64 image in html content ,not url; like this;

<img src="data: image/png; base64,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"/>

pdf display:

html display:

those images can display in html. but not display in pdf. how resolve ? thank you!

I'm facing the same issue. Base64 image i need to display in pdf converted document can this be done?

Dec 31 '19 04:12 rohanshenoy96

I had same issue as @rohanshenoy96 and @wangweinjcn - I had to remove spaces from src="data: image/png; base64,iVBOR… to make src="data:image/png;base64,iVBOR…. First is interpreted only by browsers, second - by both browsers and library.

Oct 09 '20 09:10 todsmer

My image was in local folder and not hosted. I did it by converting the image to Binary64 and then passing it hardcoded to the src. It works if you have static image

Oct 18 '20 06:10 renilbabu03

See my solution here: https://stackoverflow.com/a/46658645/495455

Nov 24 '20 02:11 MeaningOfLights

@todsmer you got base64 working with this lib? I am using img same as you: <img style="height:100%; width:100%" src="data:image/png;base64,iVBOR.... and still blank space instead of image... with .jpg same - extension doesn't matter. I tried removing white characters like you but without success. In ObjectSettings > WebSettings I've set LoadImages to true but nothing has changed.

Edit: removing style from img made png working. Instead I used width, height attributes of img: <img widht="100%" height="100%" src="data:image/png;base64,iVBORw0K... Eveything works! Although probably would be better and worked at the beggining if it was wkhtmltopdf 0.12.6 and not 0.12.4... unfortunately dinktopdf is abandoned...

Jan 22 '24 09:01 WojGrab

DinkToPdf DinkToPdf copied to clipboard

Images are not shown

DinkToPdf
DinkToPdf copied to clipboard