Rotativa / Wkhtmltopdf images not showing

Question

I am currently creating a MVC 4 web application.

I have an action that has a basic background image that always matches the arrow image, which changes in degrees depending on the information that is collected in the action.

I invoke this action using

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

This works great when it is called and just displays an HTML web page. This gives me HTML.

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

Then I use Rotativa / Wkhtmltopdf to convert this HTML page to a PDF file. This works with the same code as above.

The problem is that I just get a white square with 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 above code cannot be saved anywhere due to how it is used. I think this is a problem with paths, but having tried a lot of different things, I still can't get it to work.

Any suggestions or help would be greatly appreciated. Thanks.

Answer 1

I had the same problem. The normal html-view was in order with the pictures, in pdf-format it was not displayed. I used Server.MapPath to point to the picture, and that was fine ...

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

I hope this helps

Adam

Answer 2

I had the same problem and found a workaround, not a pleasant one, but it fits my needs.

It seems that Rotativa (Wkhtmltopdf?) Has a problem with images that return from the http handler (at least in my case). Therefore, to cope with this situation, in the controller action before returning new ViewAsPdf... my code will manually save the file in the local "temp" folder and replace the "src" of the images in the rendered view with the paths to these local files along the server path, for example: http://localhost/img/temp/trend-image.png . This is not a good solution, if you have already found the best, let me know.

Answer 3

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

Answer 4

I found that images didn’t show up with my pages because they were .gif files. Rotativa may have problems with gif. When I changed the images to .jpg or .png, everything worked fine.

Answer 5

I think this may lead to the fact that the ".png" bit is missing.

You can add a mapping like this /nonreg-report/01495344/trend-image.png " /nonreg-report/01495344/trend-image , and activate both URLs, why not? So wkhtmltopdf is fooled, and you still have a dynamic image without saving it anywhere else on disk.Dynamic urls can work, I do this to convert real-time gif2png to wkhtmltopdf.

It can also help get an absolute url, which I think you can do with the following:

 src="@Url.Action("trend-image", "NonReg_Reports", null, Request.Url.Scheme)" 

Answer 6

Everything seems to work with css ...

I tried to display the logo at the top of the page and switched it using a div and set the height and width as the image.

CSS

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

HTML:

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

Answer 7

If you specify height and width, make sure that you write it in the style tag for example <some-tag style="height: 100px; width:100px">