An HTML page can look correct on your laptop and lose its images or styling after you upload it. The first thing to check is what the browser is trying to fetch—not which host has the nicest landing page.
Disclosure: I work on dochost, one of the publishing options mentioned below. This guide was drafted with AI assistance. The examples explain browser URL resolution; they do not claim that every upload problem has the same cause.
What does a relative path mean after publishing?
Consider this HTML:
<link rel="stylesheet" href="./styles.css">
<img src="./images/chart.png" alt="Monthly totals">
Those references do not include the files. They tell the browser where to request them relative to the document's base URL. If you uploaded only report.html, its neighboring stylesheet and image may never have reached the host.
You can inspect resolution without making a network request:
new URL('./images/chart.png', 'https://example.com/reviews/report.html').href
// https://example.com/reviews/images/chart.png
new URL('/images/chart.png', 'https://example.com/reviews/report.html').href
// https://example.com/images/chart.png
The leading slash changes the location. A <base href="..."> element can also change the base used by relative links. See the MDN URL constructor reference for how relative references resolve.
Read the failed request before editing the page
Open the published link, open browser developer tools, select Network, and reload. Inspect failed requests for CSS, JavaScript, fonts, and images.
For each request, compare the requested URL with the intended asset location. A 404 suggests checking the path and whether the file was deployed. A 200 is not sufficient: inspect the response type and body. Some hosts return an HTML fallback page at a missing asset URL, which is still the wrong content for a stylesheet.
Also check filename capitalization. A reference to Chart.png can fail when the deployed file is named chart.png. Do not assume that a local filesystem and a remote host treat names identically.
Choose a single file or a complete folder
If the report is small, make it self-contained where practical. Put CSS in a <style> element and small browser scripts in a <script> element. For images, use a supported asset upload workflow, appropriate embedded image data, or stable public URLs. Weigh document size and privacy before embedding or publicly hosting an image.
dochost publishes pasted or uploaded HTML and Markdown as shareable pages. For a single HTML document, include the dependencies the page needs and test the public result. Published HTML supports JavaScript in a sandbox; that does not mean every browser API or external resource will work. Free links expire after seven days.
If the page belongs to a multi-file site, deploy the complete browser-ready folder instead. Netlify's manual deployment documentation explains uploading a prebuilt site folder. A source project with package imports may need a build first; uploading source code is not the same as deploying its generated output.
If the files load, inspect the interaction
Once CSS and images are present, a broken button is a separate diagnosis. Read the Console for JavaScript errors. Check whether the element exists when the script runs and whether its selector matches. For a form, decide whether you want a normal navigation or a client-side interaction; an unintended submission can reload the page and discard the result.
Do not label every failure as “the host blocks JavaScript.” An incorrect path, a missing file, an error in the script, or a sandbox restriction can produce different symptoms. Use a small reproduction to separate them.
Test the recipient's version
Open the link in a signed-out browser or a separate profile, then on a phone. Confirm that images and source links do not depend on your login. Try the actual buttons and check the expiry window against the review date.
Keep the original HTML and its assets separately. The repair should leave you with a reproducible document or deployment folder, not a page that happens to work only in your own browser.
Top comments (0)