My HTML file opens but the images and styling are missing. Why?

The page opens, but it looks wrong: plain black text in a default font, broken-picture icons where the photos should be, buttons stacked down the left side. The words are there, so the file isn't broken. The page is asking for files that aren't next to it. This guide shows how to tell which files are missing, and how to get a page that brings everything with it. If you see code or a white page instead, read Why an HTML file opens as code or a blank page first.

Sending a file you made? The upload box at the top of this page turns it into a preview link without an account, and names any files on your computer that the page points to. That preview runs no scripts. Click Keep this page — free, no card and sign up, and the page moves into your account, where its scripts run and you can publish it.

How the page names each missing file

An HTML file doesn't contain its pictures or its style sheet. It names them, and the browser goes to get each one. Where it looks depends on how the name is written. MDN, Mozilla's reference for web developers, explains it: a path like img/photo.png is looked for next to the page, and a path that starts with / is fetched "from the top root of the server".

We tested each kind on October 25, 2026, on a Mac with macOS 26.5.2, in Google Chrome 155.0.8059.85 with a fresh profile:

The page from a site build is the surprise. A path that starts with / points to the top of the whole disk when the page opens from a file, so /css/style.css failed even with the css folder right beside the page. Served from a local server started in that folder, both files loaded.

See what's missing

In Convika's HTML viewer. Open the free HTML viewer and choose the file, or paste its code. Under the page, the viewer names the files the page points to on your device. For our test page it said: "This page points to files on your device that cannot show here: style.css, photo.png, and app.js." The list comes from the page's tags and its CSS url() values. Files a script loads aren't listed, and neither are CSS @import lines without url(): in our test, a fetch("data.json") call and an @import "theme.css" line weren't named. If someone sent you the file, don't open a file you weren't expecting: ask the sender first, and turn off Run scripts before you choose a file you're unsure of.

In the browser's Console. Open the page in Chrome and press Ctrl + Shift + J (Cmd + Option + J on a Mac). Each file that didn't load has a line. Ours read "Failed to load resource: net::ERR_FILE_NOT_FOUND" for a missing file, and "net::ERR_INTERNET_DISCONNECTED" offline.

In the code. Open the file in a text editor and look at each src="…" and href="…". Anything that doesn't start with https:// or data: is a file the page expects to find somewhere else.

Why web files go missing offline or in a preview

Parts the page loads from the web need a connection every time it opens. Online, our test page loaded Tailwind from its CDN, a Google Fonts font, and an https:// image, from disk and in the viewer. With the network off, all 3 failed: the heading lost its Tailwind color, the font fell back to another one, and the image broke.

Previews skip the web too. On an iPhone, the Files app's Quick Look preview loaded no https:// images, Google Fonts, or Tailwind in our iOS 26.3 test, so a Tailwind page showed with no styling. In our Mac test, Quick Look on a Mac didn't style a Tailwind page either. Open the file in a browser with a connection, or in the viewer.

Put a page and its images in one file, in 4 steps

One self-contained file is the fix that works in a browser, in the viewer, and on a host. On a phone, open it in a browser or the HTML viewer, not in a preview such as Quick Look. The CSS goes in a <style> tag, the JavaScript in <script> tags, and each image either gets a full https:// address or is built into the file.

1. Ask the AI that made it for one file

Paste this into the chat that made the page:

Give me the whole page as one HTML file: the CSS in a <style> tag, the JavaScript in <script> tags, and any data written into the script. Don't link to other files on my computer. Use full https:// links for images, or leave a placeholder where my own photo goes.

For a project with several files, How to share an HTML file from VS Code shows how to fold style.css and script.js into index.html by hand.

2. Build in a photo that only you have

An AI can't see a photo on your computer, so build it in yourself as a data URL. MDN describes the form data:[<media-type>][;base64],<data>. On a Mac, macOS's base64 command turns an image into that text:

base64 -i photo.png -o photo.txt

Open photo.txt, copy everything, and put it after data:image/png;base64, in the image tag, as in <img src="data:image/png;base64,iVBORw0…">. Use image/jpeg for a .jpg. Our test page with a PNG built in this way showed it from disk and in the viewer.

3. Keep the file small

MDN notes that base64 text is "roughly a third larger" than the image it holds. Convika takes one HTML file up to 2 MB, so about 1.5 MB of built-in images fits, less the page's own code. Shrink big photos first, or give them https:// addresses.

4. Check it in the viewer

Open the new file in the HTML viewer. If no line about missing files shows under the page, no tag or CSS url() in it points to your computer. Files a script fetches aren't listed, so search the code for fetch( as well. Then press every button: the viewer runs scripts in a sandbox, and the code-or-blank guide lists the few things it blocks.

Or send the whole folder as a zip

A zip carries the page and the files beside it together. On a Mac, Apple's guide says to Control-click the folder and choose Compress, and to double-click a .zip file to expand it. On Windows, Microsoft's steps are Show more options > Send to > Compressed (zipped) folder, and Extract All… to unzip.

After unzipping, open index.html from the unzipped folder: in our test, a page opened from its own folder loaded its style.css, photo.png, and app.js. A zip has limits, though:

• Paths that start with /, module scripts, and data files still fail from disk. Our /css/style.css page broke even in its folder, and the Mac guide's test found a type="module" script and a fetch() of a .json file blocked from disk.
• Gmail won't send one with a .js file inside. Gmail's help lists .js among the file types it blocks, including "when found within archives (like .zip or .tgz files)".
• The viewer and Convika take one file. The HTML viewer reads the single file you choose, and Convika takes one HTML file, not a folder or a zip.

Letters turn into strange characters

Letters like é or � in place of é are a different missing piece: the file doesn't say how its text is encoded, or says it wrongly, so the browser reads it the wrong way. The HTML standard requires UTF-8, and MDN says the <meta charset> element must be "located entirely within the first 1024 bytes of the document". Put this line at the top of the <head>, and save the file as UTF-8:

<meta charset="utf-8">

We tested the text "Café menu — “Today’s special” costs €5" in Chrome 155 on our Mac, whose system language is Japanese:

Convika's HTML viewer reads a file's byte-order mark or its <meta charset>, and UTF-8 when it has neither. The Windows-1252 file with no label showed Caf� menu there. Japanese or Korean text that turns into other characters usually has the same cause.

Fonts look different on another device

A font named only in the CSS shows only where it is installed. MDN explains that the browser "will select the first font in the list that is installed or that can be downloaded using a @font-face" rule, so another device falls back to the next font in the list. A font from Google Fonts needs a connection: offline, our test heading fell back. End each font-family list with a generic family such as sans-serif, and load a web font with a link if the look matters.

The layout looks different on a phone

A page without a viewport line is laid out for a wide screen and shrunk to fit a phone. MDN says some phones render pages "with a virtual viewport of 980px". In Playwright's iPhone 15 emulation, in its WebKit 27.2 test build (not a real iPhone), our page without the line was laid out 980 px wide at 40% scale, with 3 columns of tiny text. With the line, it was 393 px wide, and its 1-column phone layout applied. Put this in the <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

The viewer's Phone width shows a narrow frame, not a phone, so check a phone layout on a phone.

Send a link instead

A link sends the page with everything it needs: the other person opens it in their browser, and the files can't get separated.

1. Drop your one-file page into the upload box at the top of this page, or paste the code. You get a preview link in seconds, without an account. It works for 3 minutes, with scripts and forms off. If the page still points to files on your computer, the box names them: "Your page links to local files on your computer".
2. Click Keep this page — free, no card and sign up. The page moves into your account, and its scripts run in the dashboard preview.
3. Click Publish page. Under Who can open this page?, choose Public and click Next. The first time you publish, Convika shows Publish free, and under it Publish without the Convika bar, which opens an order for Pro monthly (1 day free with a card, then $12 a month). To publish on Free, click Publish free.
4. Copy the address under Live URL and send it instead of the file.

A published page loads images built into the file, and images, style sheets, scripts, and fonts from https:// addresses. Convika hosts one HTML file per page, so a style.css or a photo.png beside it has to go inside the file first.

Frequently asked questions

Why are images not showing in my HTML file?

The images are separate files that didn't come with the .html file. A tag like <img src="img/photo.png"> points to a file next to the page. In our Chrome 155 test, the same page loaded its image from its own folder and broke when copied alone. Use full https:// addresses for images, or build them into the file as data URLs.

Why is my CSS not loading?

The page links to a style.css that isn't beside it, or names it with a path that starts with /. From disk, Chrome 155 loaded style.css from the page's folder, failed when the page was alone, and failed on /css/style.css even with the folder there. Put the CSS in a <style> tag inside the page.

How do I send an HTML file with its images?

Send one file with the images built in, or send a link. Ask the AI that made the page for one HTML file with full https:// image addresses, or turn your own photos into data URLs. A zip of the folder works on a computer once it's unzipped, but Gmail blocks a zip with a .js file inside.

How do I put an image inside an HTML file?

As a data URL: <img src="data:image/png;base64,…">, with the image's base64 text after the comma. On a Mac, base64 -i photo.png -o photo.txt makes that text. MDN notes the text is about a third larger than the image, so shrink big photos first.

Why does my page look different on my phone?

It may have no viewport line. Without <meta name="viewport" content="width=device-width, initial-scale=1">, our test page was laid out 980 px wide and shrunk to 40% in an iPhone 15 emulation. With it, the page used its phone layout. A missing font or image can change the look too.

Why does my HTML file show strange characters?

The file and the browser disagree about its encoding. In our Chrome 155 test, a UTF-8 file labeled windows-1252 showed Café, and a Windows-1252 file labeled utf-8 showed Caf�. Save the file as UTF-8 and put <meta charset="utf-8"> at the top of the <head>.

Can Convika's HTML viewer show images from my computer?

No. The viewer reads the one file you choose, so an image beside it on your device can't show, and the viewer lists it under the page. Images with https:// addresses and images built into the file show. The file stays in your browser unless you press Get a link by uploading this page.

Sources

• What is a URL? (MDN) (last modified January 8, 2026; checked October 25, 2026)
• data: URLs (MDN) (last modified August 30, 2026; checked October 25, 2026)
• Base64 (MDN glossary) (last modified December 10, 2025; checked October 25, 2026)
• The meta element (MDN) (last modified April 24, 2026; checked October 25, 2026)
• Specifying the document's character encoding, HTML Standard (WHATWG) (last updated October 22, 2026; checked October 25, 2026)
• The <meta name="viewport"> element (MDN) (last modified September 23, 2026; checked October 25, 2026)
• font-family (MDN) (last modified October 21, 2026; checked October 25, 2026)
• Zip and unzip files and folders on Mac (Apple) (checked October 25, 2026)
• Zip and unzip files (Microsoft Support) (checked October 25, 2026)
• File types blocked in Gmail (Gmail Help) (checked October 25, 2026)
• Open Chrome DevTools (Chrome for Developers) (last updated December 14, 2018; checked October 25, 2026)