Image not found in Rotativa PDF document

We have implemented Rotativa to generate and save a PDF version of our web page on the server. Below is the ASP.NET MVC 4 code snippet used for this purpose:

 var pdfResult = new ActionAsPdf("Index", new { orderId = orderValidated.orderID }) { FileName = filePath };

 var binary = pdfResult.BuildPdf(ControllerContext);

 // The file is saved only if it does not exist already, in order to preserve the original print.
 if (System.IO.File.Exists(filePath) == false)
 {
    System.IO.File.WriteAllBytes(filePath, binary);
 }

We specify a specific 'css' file for printing within the <head> section of the page:

<head>
  <link media=all href="/Content/invoice.css" type=text/css rel=stylesheet>
  <link media=print href="/Content/printInv.css" type=text/css rel=stylesheet>      
</head>

The 'css' file for print includes:

#logo {background: url(/assets/images/logo-plain.gif) no-repeat; height: 56px}

However, the *.gif image is missing from the generated PDF document, even though it appears correctly on the screen.

Any insights into why this might be happening?

Thank you.

cssasp.netasp.net-mvcpdfpdf-generation

Answer №1

It seems like there might be an issue related to Rotativa.

To resolve this, I opted to embed the background image directly within the HTML using the image tag and then utilized CSS for positioning:

#bg {
    position: absolute;
    top: 10px;
    left: 5px;
    z-index: 0;
}

<img src="@Url.Content("~/images/background.jpg")" id="bg" />

Answer №2

From my understanding, Rotativa seems to have difficulties with gif images. It might be worth trying jpg or png instead.

Answer №3

"<img src="/images/" + productCatalog["productCode"].toString() + ".jpeg" height=200 width=200 />"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adaptive component transformation

Hey there, I'm having some trouble figuring this out... I need help with making sure that the element identified by the red rectangle in the images moves in alignment with the containers below, regardless of the screen size. I want to create a respon ...

csshtmlresponsive-design

What are the steps to make a div with no content inside?

Presently, I am dealing with 2 overlapping transparent div's each containing unique buttons and functionalities in the following manner: .item1{ height:10rem; width:10rem; position:absolute; border:0.5rem solid red; background-color:trans ...

javascripthtmlcss

What is the process for implementing a third-party component in my web application?

After some experimentation, I've discovered that it's necessary to include the link to the css files in the header and then mention the link to the js files before the closing tag. However, I encountered difficulties when trying to use a compone ...

javascripthtmlcsssemantic-uicustom-component

ASP.NET Snippet

I have a project requirement where I need to dynamically add or remove sub-pages or page fragments with various controls like menus, buttons, and textboxes. The user should be able to select from a dropdown menu which type of fragment to add, whether it&ap ...

asp.net

When interacting with Chrome, the div gets automatically blurred upon being clicked

While working on the development of our website, we stumbled upon something peculiar. We have a set of divs displayed on the screen, resembling the layout of Pinterest. Upon clicking any of these divs, the content within that particular div is loaded into ...

jqueryhtmlcssgoogle-chrome

CSS: Achieving vertical centering without specifying a fixed height using line-height. Is it possible?

Using line-height to vertically center text within an inline-element is a technique I often employ. Here's a demo I created: body, section { width: 100%; } section { background-color: lightGrey; } #wrap { margin: 30px auto; width: 100%; ...

htmlcss

What is the method for utilizing the server tag <% %> in asp.net when using Response.Write?

In what way does asp.net utilize the server tag <% %> in Response.Write? I attempted the following: Response.Write("<% MyCode %>") However, this code just displays <% MyCode %> as plain text ...

c#asp.net.netvb.net

Javascript collapsible panel that is initially expanded

I found this code example here and decided to implement a collapsible panel using css/html/javascript: function toggleCollapsibleSectionWithAnimation() { this.classList.toggle("collapsible-active"); var buttonId = this.id; var sectionId = buttonId ...

javascripthtmlcss

After signing out and signing back in, the ASP.NET Identity username does not update

Our system is powered by ASP.NET Identity 2.0 and we are looking to enable users to change their usernames. However, we are encountering an issue during this process: The user is signed out successfully without any errors. The username is updated in the ...

c#asp.netidentity

Is it possible to retrieve InnerXml instead of InnerText when utilizing the XPath binding expression?

Currently, I am linking a control to an XmlDocument and utilizing the "XPath" binding expression to display the data: <div class="Bio"><%# XPath("Biography") %></div> However, the output is only the InnerText property of the "Biography" ...

c#asp.netxmldata-binding

Ways to include a right arrow symbol for sub-child items and a downward arrow for child menu options

I have a php form that generates a drop-down menu using php mysql. The current menu is simple, but I would like to enhance it by adding a right arrow for sub-children and a down arrow for child menus using css. Unfortunately, I am unable to modify the css ...

phpjqueryhtmlcssmysql

Achieving success by correctly reaching the window's edge during an event (onscroll)

This happens to be my 1st inquiry. Specifically, I have a navigation menu with a transparent background and I am attempting to alter the background once it reaches the top edge of the window. window.addEventListener("scroll", navSticky); function navSt ...

javascripthtmlcssonscroll

Tips on utilizing a local file as a background image URL

How can I modify my CSS to link to a local file path like C:\xampp\htdocs\Folder instead of the URL https://source.unsplash.com/1600x1050/?nature. I am currently using Bootstrap 4 and below is my CSS code: .jumbotron{ background: ...

htmlcssbootstrap-4

Tips for setting up personalized breakpoints for a Bootstrap navbar

I am currently facing an issue with my navbar on tablet view. Despite implementing custom breakpoints to collapse the navbar at 1050, the menu bar is appearing in two rows instead of one. I have tried using the code below but it doesn't seem to be wor ...

csstwitter-bootstrap

jQuery's slide toggle function is limited to toggling the visibility of just one section at

Welcome to my first post! As a newbie in web development, I have just started my first project. While I feel comfortable with HTML and CSS, jQuery is proving to be a bit challenging for me. In the head section of my intranet page, I have the following cod ...

jqueryhtmlcssslidetoggle

Is it possible to modify the background color of a select option menu when hovering over it?

It turns out that the default background color of the select option menu changes to blue when it is hovered over. However, I would like to personalize and adjust it to my preference using Bootstrap 5 and CSS. Any assistance with this customization would ...

cssbootstrap-5

Is there a reason why using margin:auto doesn't work for vertically centering items?

I'm having trouble understanding how margin auto functions. In the scenario I'm dealing with, I have a parent div and a child div nested within it, both with specified widths and heights. I attempted to use margin auto in order to center the inne ...

htmlcssmargin

Text in HTML/CSS is refusing to indent properly within boxes

I am working on a web page that animates boxes and displays text details. However, I am facing an issue where the text does not align properly inside the flipped box. I would like to decrease the font size of the text in the flipped box. Despite trying to ...

htmlcss

Attach a child element to the bottom of its parent div when the parent div reaches the bottom

I'm looking to make a child div stick to the bottom when the parent div reaches the bottom of the browser window. Note: This behavior should only occur when the parent div is pushed down, not when the page is scrolled down. For instance, in my demon ...

javascriptjqueryhtmlcss

Having trouble with CSS and javascript files not resolving after moving app to a new Windows 7 development machine

I have recently migrated my ASP.Net 3.5 web site from my old XP sp3 machine to a new Win 7 64-bit dev machine. The web application utilizes Master Pages, App_Themes with style sheets and images, as well as an image folder located off the main root. Additio ...

asp.netjavascriptcss