Guides / Finipage / Fixing problems

Images Not Showing in an HTML File? Check the Paths

By the Qorlize team · Last reviewed November 11, 2026

Finipage guide · Edit HTML files without code. Open Finipage

The page looked right on your computer. Then you emailed it or uploaded it, and the photos turned into broken-image icons and the styled layout fell back to black text in the browser's default serif font. In nearly every case the files still exist; the HTML is pointing to a place where they are not. An HTML file does not contain its images. It only contains addresses, and those addresses have to stay true wherever the file goes.

Absolute paths, relative paths and `../`

Every src and href in your page is one of three kinds:

Written as	Kind	Resolved from
`https://cdn.example.com/logo.png`	Full URL	Nowhere else; it is complete
`/images/logo.png`	Root-relative	The root of the site (or of the drive, when opened from disk)
`images/logo.png`	Relative	The folder the HTML file sits in

Relative paths are the ones that travel well. If index.html and an images folder sit side by side, images/logo.png works on your desktop, in a zip, and on any server, as long as the two keep their positions.

../ means "go up one folder." Suppose your files look like this:

site/
  index.html
  css/style.css
  images/hero.jpg
  pages/about.html

From pages/about.html, the hero image is ../images/hero.jpg. From index.html it is images/hero.jpg. A common slip is copying an <img> tag from one file to the other without adjusting the ../.

The same rule catches CSS: a url() inside css/style.css is resolved from the CSS file's folder, not from the HTML. So a background image in that stylesheet is url(../images/hero.jpg), even though the page that uses it is one level up.

Root-relative paths are the trap for local files. Opened from disk, /images/logo.png means C:/images/logo.png, the top of your drive. It only works once the page is on a server where / means the site root.

Paths that only work on one computer

Look for these in the source (most editors can search for them):

Local file paths. C:\Users\kim\Desktop\new folder\logo.png or file:///C:/Users/... point into one person's hard drive. Some page builders and "Save as" features write these in. They work on that machine and nowhere else. Replace them with relative paths.
Letter case. Windows and macOS treat Logo.PNG and logo.png as the same file. Most web servers run Linux, which does not. A page that worked on your PC breaks on upload because the tag says Logo.png and the file is logo.png. Make the two match exactly; using lowercase for every file name avoids the problem for good.
Spaces. my photo.jpg is legal, but inside a URL the space should be written %20. Browsers usually forgive it; some servers, email clients and upload tools do not.
Korean and other non-ASCII names. 메인사진.jpg works in modern browsers, but it can fail after passing through a zip tool or FTP client that changes the name's encoding. Files named on a Mac also often store Hangul in decomposed form (NFD), while Windows and the HTML you typed use the composed form (NFC). The name looks identical on screen but no longer matches the tag. Renaming to something like main-photo.jpg removes the risk.

Only the HTML file was sent

This is the most common case of all. Someone attaches index.html to an email or a chat message, and the images and css folders stay behind on their computer. The receiver opens a page with every relative link pointing to folders that do not exist on their machine.

The fix is to share the whole folder. On Windows, right-click the folder and choose Send to > Compressed (zipped) folder; recent versions of Windows 11 also offer a Compress to entry at the top of the menu. On a Mac, right-click and choose Compress. The receiver should extract the zip fully before opening index.html; opening the HTML straight from inside the zip preview will fail to load the other files.

Pages generated by AI tools have a variant: the HTML refers to images/team.jpg, but that file was never created. Supply the image or change the tag.

Finding the broken path with DevTools

Open the page and press F12 (or Ctrl+Shift+I).
Go to the Network tab and reload with Ctrl+R. Requests that failed appear in red with status 404 on a server, or (failed) when the page was opened from disk.
Click a red row. The Request URL shows the full address the browser tried. Compare it with where the file really is: wrong folder, wrong case, a missing ../, or a leftover C:\Users path all show up immediately.
The Console tab lists the same failures, such as Failed to load resource: the server responded with a status of 404 or net::ERR_FILE_NOT_FOUND.

Two other Console messages point to causes that have nothing to do with the path. Mixed Content means an https:// page asked for an http:// resource. Browsers block http:// stylesheets and scripts outright, and current versions try to load http:// images over https:// instead, so the image fails if its server has no HTTPS version. Change the address to https://, or host the file yourself. A CORS error on a font means the font file sits on another domain that does not allow your site to use it; host the font alongside your page or use a font service that sends the right header, as described in changing fonts in an HTML page.

Fixing it, by hand or in Finipage

By hand, the fix is to make each path relative and correct: open the HTML in a text editor such as VS Code, search for src=, href= and url(, and rewrite each one against the folder layout. Then keep the HTML and its folders together whenever you move, zip or upload them.

If you edit the page in Finipage, you will hit the same limitation at first: when you open only the HTML file, the browser hands the editor that one file only, so images and CSS referenced as images/a.jpg do not appear. Click Link folder at the top and select the folder that contains the HTML file; the relative images and stylesheets then show up while you edit. Saving keeps the original paths, so the file still works with its folder afterwards.

The same rule applies when you put the page online. Upload the whole folder to your host, not just the HTML file, and keep the subfolders in the same layout. If only index.html goes up, the relative paths point to files that are not there and you are back to broken icons.

Before publishing anywhere, open the page from a different folder or computer, or have someone else open your zip. If it looks right there, the paths are relative and complete.

Where to go next

Once every image loads, putting the page online covers where to host it, and checking the page on mobile covers the next thing that usually breaks.

Want to try it on your own file? Open the Finipage editor. It runs in your browser and your file stays on your device.