Problems rendering large html files (links are wrong, images not displaying)

I created a script which takes an xml input and creates html based reports for ease of viewing. All of the reports are based off of the same html template. Some reports are small (50KB), some are larger (7MB). I have a problem with the larger page not rendering images and links pointing to the wrong places. What is odd is that if I remove the large data blocks (just a series of divs), things render fine. Also, things are fine if the reports are smaller to begin with.

For example, with a small report, the following code renders the img correctly:

<a href="http://www.company.com"><img id="logo" src="../images/logo.png" alt="logo" /></a>

The exact same code gives me a missing image icon in a larger report. When inspecting the element in Firefox, I get "Could not load the image" message. Again, all reports are based off the same html template, and the code for the logo and nav never change, neither does the directory structure.

Additionally, the following code is a simple link to return to the main page:

<nav id="nav">
    <a href="../index.html">Dashboard</a>
</nav>

The link works properly in a smaller page, but in a larger one it tries to redirect to file:///user/index.html (wrong).

I have tried moving the large file into a different directory, tried moving it to the parent directory and redoing the links, but nothing helps. While first loading the page, it displays the alt text, then the broken image icon.

This happens in Chrome, Firefox, and IE11. The image displays properly in Safari. The only thing that seems to have an impact is the size of the file.

Any ideas would be greatly appreciated as all my Google-fu has been spent.