How to load local html file into UIWebView
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.
Introduction
Loading a bundled HTML file into UIWebView was a common pattern in older iOS apps for help screens, local documentation, and hybrid content. The mechanics are straightforward: include the HTML file in the app bundle, build a file URL, and load it with a base URL that lets related assets resolve correctly. The important caveat is that UIWebView is legacy API, so new code should use WKWebView, but the loading model is still useful to understand for maintenance work.
Put the HTML File in the App Bundle
The first requirement is that the HTML file, plus any CSS, images, and JavaScript it references, are copied into the target bundle.
For example, suppose the bundle contains:
- '
index.html' - '
styles.css' - '
logo.png'
If those files are not part of the app target, no amount of code will load them correctly. In Xcode, the file must be included in the target's build resources.
Load by File URL
The most direct pattern is to locate the HTML file in the bundle and load it from a file URL.
That works when the HTML file is self-contained or uses relative paths that can resolve from the file location.
Use loadHTMLString With a Base URL When Needed
If you want to read the HTML contents yourself, or modify the HTML before loading it, you can use loadHTMLString. The important part is providing a base URL so relative resources still work.
This version is especially useful if the HTML references styles.css or images with relative paths. Without the correct base URL, those related files may fail to load.
Why the Base URL Matters
Suppose index.html contains:
Those asset paths are relative. If the web view does not know the file-system directory that should act as the base, it has no way to locate them correctly. That is why loadHTMLString without a meaningful base URL often shows raw HTML layout with missing styles and images.
Prefer WKWebView for New Code
Even though this article is about UIWebView, the maintenance reality is that WKWebView is the modern replacement. If you are touching this code in an app that is still evolving, consider whether the better fix is migration rather than refining legacy loading calls.
The equivalent WKWebView API for local file loading looks like this:
That is usually the better long-term direction, but legacy UIWebView codebases still benefit from understanding the older pattern.
Common Pitfalls
- Adding the HTML file to the project but not to the app target's build resources.
- Loading an HTML string without a correct base URL, which breaks relative CSS, image, or script paths.
- Assuming missing local assets are a web-view bug when the bundle path is actually wrong.
- Treating
UIWebViewas a modern default instead of recognizing it as legacy code that should usually migrate toWKWebView. - Hardcoding file-system paths instead of using
Bundle.mainto resolve resources safely.
Summary
- To load local HTML in
UIWebView, put the files in the bundle and load them by bundle URL. - '
loadRequestis fine for simple file loading, whileloadHTMLStringis useful when you also need to supply a base URL.' - Relative assets such as CSS and images depend on the base URL being correct.
- Bundle membership problems are a common reason local HTML appears not to load.
- For new work, prefer
WKWebView, but the legacyUIWebViewpattern is still useful for maintaining older apps.
Related reading
- How to load npm modules in AWS Lambda?
- How to make a function wait until a callback has been called using node.js
- How to make an app's background image repeat
- How to make Angular canDeactivate Service wait for Modal Dialog response?
- How to load specific image from assets with Swift
- How to load video url's thumbnail image on tableview list Asynchronously
- How to make different calls to an async method waiting for the result of first call?
- How to make JavaScript execute after page load?
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseTrack what you have practised
A free account saves your progress, solutions and study plan across every problem on Codemia.
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.