Fix broken images and CSS after converting HTML to a link

The cause in one picture

On your laptop the page lives in a folder next to its files:

my-site/
├── index.html
├── style.css
└── images/
    └── hero.jpg

Inside index.html, <img src="images/hero.jpg"> means “look for images/hero.jpg next to me”. Upload only index.html and there is nothing next to it on the server, so the image breaks.

The five-minute checklist

1. Upload everything. Drop the whole my-site folder or a ZIP of it into the ZIP to link converter.
2. Hunt for computer paths. Search your HTML for C:\, /Users/, /home/ and file://. Replace them with relative paths.
3. Match the case exactly. Your computer may treat Hero.JPG and hero.jpg as the same file; web servers do not.
4. Check slashes. Use forward slashes (images/hero.jpg), never backslashes.
5. Mind leading slashes. /images/hero.jpg means “from the root of the site”. That works on your own subdomain, but not if you previewed the page from a sub-folder locally.

Find every path automatically

Paste your HTML into the HTML link extractor with “Include assets” ticked. It lists every image, stylesheet and script the page asks for, so you can spot the bad ones at a glance.

Spaces and special characters

A file named my photo (1).jpg works, but it is fragile in links. Rename files to lowercase with hyphens — my-photo-1.jpg — and update the HTML to match.

Build tools (Vite, React, Angular)

Upload the build output (dist or build), not your source folder. If the build used absolute asset paths for a different base URL, set a relative base — for Vite, base: './' in vite.config.js — and rebuild.