Simple HTML page with jpgs will no longer load on Android from local storage (previously loaded fine)

[jyang]

I’m not a web developer, but just wondering if there’s an obvious answer to this?

I have an old webpage created in year ~2000, just an .HTML file with text and several jpg files contained in the same folder as the .HTML file. It always loaded correctly whether hosted online or opening it from local hard drive. In May 2025 I copied it (HTML and jpgs) to the local storage of an older Android phone (Samsung A02s running Android 12), and it loaded fine.

However, now it won’t load properly on that older Android phone. The HTML file loads but all the jpgs show as broken links. This is the case when loading the .HTML in Google Chrome, “Browser”, and “HTML Viewer”. In Chrome, in “Permissions”, I turned on allowing of loading of “Files and media”, and also cleared the cache in Chrome, but the problem remains.

I also emailed to self a zipped, fresh new copy of the webpage (HTML and jpgs), unzipped it to the older phone’s storage, and the fresh new copy also won’t load properly.

I then did all of the above with a second, newer Android phone (Samsung A15 running Android 16) (with the exception of turning on allowing of loading of “Files and media” in Chrome “Permissions”, because I didn’t see this option there). The same problem (of HTML file loading but jpgs showing as broken links) happens on the second newer Android phone. On this phone I tried loading the webpage in Chrome, “Browser”,“HTML Viewer”, and Brave browser.

The webpage loads fine on Windows PC from local hard drive, no matter what folder I put it in.

The references in the HTML file to the jpg locations are all relative; for example,

<p><img SRC="rail_3.jpg" height=287 width=429>

It doesn’t seem like file corruption, and if it’s one app-specific change on Android, it shouldn’t affect all of Chrome, “Browser”, “HTML Viewer”, and Brave?

Does anyone know what I’m doing wrong?

Thanks.

[sitepoint-helperbot]

Hi jyang,

Welcome to the SitePoint Forums!

This is a classic issue with modern Android security models. The problem isn’t your HTML code or the files themselves, but rather how Android restricts web browsers from accessing local files on the device’s storage.

Around Android 10 (API level 29), Google introduced “Scoped Storage,” which significantly tightened restrictions on how apps (including browsers) can access the file system. Before this, browsers could often access any file on the device. Now, they are sandboxed. When you try to load an http://localhost/... or file:///... URL from a local HTML file, the browser’s security policy often blocks the loading of associated resources (like your .jpg images) to prevent malicious scripts from reading your private files. This explains why it works on Windows (where local file access is less restricted for browsers) but fails on modern Android devices, even if it worked briefly on your older phone before updates tightened permissions.

Here are a few practical workarounds to get your page working on Android:

1. Use a Local Web Server (Recommended)

The most robust solution is to serve the files via a local HTTP server rather than using the file:// protocol. This mimics how the site works when hosted online.

• On your PC: If you have Python installed, you can run a simple server in the folder containing your HTML and images:

  python -m http.server 8000
  

  Then, on your Android phone, ensure it’s on the same Wi-Fi network as your PC, and navigate to http://<YOUR_PC_IP_ADDRESS>:8000/yourpage.html in Chrome.
• On the Android phone: You can install an app like “Simple HTTP Server” or “KSWEB” to serve the folder directly from the phone’s storage. This allows the browser to load the HTML and images via http://localhost/..., which bypasses the file:// restrictions.

2. Embed Images as Base64 Data URIs

If you don’t want to use a server, you can embed the images directly into the HTML file. This converts each .jpg into a long string of text (Base64) that sits inside the src attribute.

• How to do it: Use an online tool or a script to convert your .jpg files to Base64.
• Example:

  <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..." width="429" height="287">
  

• Pros: It’s a single file (or fewer files) and works regardless of local storage permissions.
• Cons: It makes the HTML file much larger and harder to edit manually.

3. Check File Paths and Permissions

While less likely to be the root cause given your description, ensure that:

• The image files are not in a subdirectory that the browser can’t traverse.
• The file extensions are exactly .jpg (lowercase) and not .JPG or .jpeg, as some Android file systems are case-sensitive.

Why it worked before

Your older Samsung A02s running Android 12 might have had a temporary exception or a different browser version that was more lenient with file:// access. However, Android updates frequently tighten these security policies, which is why the same setup fails on newer devices or after system updates.

For more details on local web development and serving files, you might find this SitePoint article on Setting Up a Local Development Environment helpful.

Hope this helps you get your old webpage back on track!