How to fix missing images and CSS after publishing HTML
Troubleshooting ·
Your HTML page opens after publishing, but its logo is missing, its charts are blank or its layout has lost its styles. Start by checking the files and URLs the page asks the browser to load. The HTML often arrived successfully while one of its dependencies did not.
These checks work for an exported report, a generated website or a compiled frontend uploaded to Publidock.
Upload the whole export
If a page refers to separate files, include them in the uploaded folder or ZIP. For example:
report/
index.html
assets/
report.css
chart.js
images/
revenue.png
The page might contain:
<link rel="stylesheet" href="assets/report.css">
<script src="assets/chart.js"></script>
<img src="images/revenue.png" alt="Example revenue by month">
Publishing only index.html leaves those three resources behind. Publish the complete export and preserve the relative folder structure. Include the generated output files, rather than substituting source files that still need a build.
Compare the requested URL with the file path
Open the published page and inspect the browser's Network panel while reloading it. Find a failed image, stylesheet or script request, then compare its URL with the uploaded files.
A 404 points toward a missing file or an unexpected path. An authorization response may mean an external service requires a sign-in the viewer does not have. If a script request receives HTML, check the path and any SPA fallback setting; the browser cannot use an entry page as a JavaScript file.
For the layout above, images/revenue.png is relative to the page's address. A path starting with /images/ begins at the site's root. A path such as file:///C:/reports/revenue.png refers to a local file that a remote viewer cannot fetch. MDN's image element reference describes the image source URL.
Check capitalization too. Keep the name in the HTML and the uploaded path identical, including extensions: Revenue.PNG and revenue.png should not be treated as interchangeable.
Check paths inside CSS and generated builds
An image referenced with url(...) inside a stylesheet is resolved relative to that stylesheet. For assets/report.css to load images/revenue.png from the layout above, its relative reference would be ../images/revenue.png.
For a built frontend, inspect the actual generated paths. If it was built for a directory such as /demo/ and you publish at a site's root, its asset URLs may still expect that directory. Update the project's build configuration and rebuild. The Vite publishing guide covers that case and direct browser routes.
Separate missing files from missing services
A page can load every uploaded file and still depend on something unavailable to the viewer: a private API, a script CDN, a development server or a live notebook session. Check failed requests and browser console messages to identify that dependency.
Use a self-contained export when it fits the artifact. The Plotly guide includes the chart library in its example, and the Quarto guide explains embedded resources. Test the exported result; an embedding option may not capture resources fetched dynamically.
Publidock serves the files you upload. It does not run a local application server, execute notebook cells or provide credentials to an external API.
Publish the corrected version
Fix the export or build at its source, then upload the complete corrected output as a new version of the existing site. Check its preview, make it live and reload the live URL as a viewer. Test the page that originally failed, including its images and interactions.
Keep the site's existing address for this repair. That lets people return to the same link with the corrected files. The publishing docs explain the upload workflow, and the access guide helps separate a file problem from an audience restriction.