Rotativa / Wkhtmltopdf images not displaying

Question

I am currently creating an MVC 4 web application.

I have an action that has a base background image which is always the same then an arrow image which changes in degrees depending on the information that is collected within the action.

I call this action using

<img src="@Url.Action("trend-image", "NonReg_Reports")" alt="background" width="245" height="105" />

This works fine when it is called and is just displaying a HTML webpage. It gives me the HTML.

<img src="/nonreg-report/01495344/trend-image" alt="background" width="245" height="105">

I am then using Rotativa / Wkhtmltopdf to convert this HTML page into a PDF. This runs the same piece of code as above.

The problem is I am just getting a white box with the alternative text in it if I use the code above.

If I use <img src="~/Content/images/trend_back_medium.png" alt="astuff" /> which is the actual background image in my project it works fine.

The image from the code above can not be saved anywhere due to how it is used. I am thinking that it is a path problem, but after trying lots of different things I can still not get it to work.

Any suggestions or help would be greatly appreciated Thank you.

Solution 1

I had the same problem. Normal html view was ok with pictures, pdf was not display it. I used Server.MapPath to point to picture and it was ok...

<img src="@Server.MapPath("~/Folder/SubFolder/Subfolder/ImageName.png")" />

I hope this will help

Adam

Solution 2

I faced the same problem and I found a workaround, not a nice one, but it suits my needs.

It seems that Rotativa(Wkhtmltopdf?) have a problem with images which are returned from http handler (at least my case). So to handle this situation, in controller action before return new ViewAsPdf... my code manually save file to some local 'temp' folder and replace 'src' of images in rendered view with paths to that local files in server path manner, eg: http://localhost/img/temp/trend-image.png. This is not a nice solution, if you already found better one, let me know.

Solution 3

Adding the attribute [System.Web.Mvc.AllowAnonymous] to the controller method returning the image solved the problem for me.

Solution 4

It seems to work okay via css...

I was trying to display a logo at the top of the page and switched it with a div and set the height and width to that of the image.

CSS:

div.logo {
    background-image: url("/images/logo/logo.png");
    height: 53px;
    width: 185px;
}

HTML:

<div class="logo"></div>

View more solutions

Comments

[Kremena Lalova]

Thanks! It helped me with a similar issue that I had while referencing css files in my layout!!! <link href="@Server.MapPath("~/Content/css/main.css")" rel="stylesheet" media="screen" />

[pixelda]

Using the style attribute on a TD correctly showed an image on the development machine but would not work on the live server. I had to resort to this method to get the image to display in a PDF on the live box. Anonymous access (as some have suggested) is not an option for me on the live box

[Vin Shahrdar]

How would this help?