Load resources from relative path using local html in uiwebview

UIWebView

HTML

Relative Path

Local Resources

iOS Development

Load resources from relative path using local html in uiwebview

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

When a local HTML file in UIWebView cannot find its CSS, JavaScript, or images, the root problem is usually the base URL. Relative paths only work when the web view knows which folder should be treated as the HTML document’s location. In older UIWebView code, the usual fix is to load the HTML from the app bundle and supply a file-based base URL that points at the resource directory.

Why Relative Paths Fail

Suppose your bundle contains a folder named web with these files:

'index.html'
'styles.css'
'script.js'
'images/logo.png'

And the HTML contains relative references such as styles.css or images/logo.png. Those paths only resolve correctly if the HTML is loaded from the matching bundle folder.

If you build the HTML string yourself and call loadHTMLString: without a base URL, the relative references have nowhere reliable to resolve from.

Load the HTML with a Base URL

A safe pattern is to read the HTML from the bundle and pass the directory URL as the base.

objective-c

1NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index"
2                                                    ofType:@"html"
3                                               inDirectory:@"web"];
4NSString *html = [NSString stringWithContentsOfFile:htmlPath
5                                           encoding:NSUTF8StringEncoding
6                                              error:nil];
7
8NSString *directoryPath = [htmlPath stringByDeletingLastPathComponent];
9NSURL *baseURL = [NSURL fileURLWithPath:directoryPath isDirectory:YES];
10
11[self.webView loadHTMLString:html baseURL:baseURL];

This is the most useful pattern when you need to manipulate the HTML before loading it or when the HTML content is assembled dynamically.

Example HTML with Relative Resources

The matching local HTML can stay clean and use normal relative references.

html

1<!DOCTYPE html>
2<html>
3  <head>
4    <link rel="stylesheet" href="styles.css">
5    <script src="script.js"></script>
6  </head>
7  <body>
8    <img src="images/logo.png" alt="Logo">
9    <h1>Hello from the bundle</h1>
10  </body>
11</html>

As long as the bundle folder structure matches the relative paths, UIWebView can resolve them through the base URL.

Load the File Directly When No HTML Manipulation Is Needed

If you do not need to rewrite the HTML string, loading the file URL directly is simpler.

objective-c

1NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index"
2                                                    ofType:@"html"
3                                               inDirectory:@"web"];
4NSURL *fileURL = [NSURL fileURLWithPath:htmlPath];
5NSURLRequest *request = [NSURLRequest requestWithURL:fileURL];
6
7[self.webView loadRequest:request];

This often works well for a self-contained help page or embedded documentation screen.

Keep the Bundle Structure Intact

Relative resource loading depends on the packaged bundle matching the paths used in the HTML. In Xcode, confirm that your HTML, CSS, JavaScript, and image files are copied into the app target and preserved in the expected folder layout.

A common maintenance mistake is adding index.html to the bundle but forgetting its companion files. The HTML loads, but the page appears unstyled or images break.

`WKWebView` Is the Modern Replacement

UIWebView is deprecated, so new work should use WKWebView. The same base-URL idea still matters there, but if you are maintaining an old codebase, understanding the UIWebView pattern is enough to fix relative-path issues safely.

Common Pitfalls

Calling loadHTMLString: without supplying a base URL.
Referring to bundle resources with relative paths that do not match the packaged folder structure.
Loading only the HTML file into the target and forgetting CSS, JavaScript, or image assets.
Using absolute desktop file paths that work in development but not inside the app bundle.
Spending time debugging HTML when the real issue is target membership in Xcode.

Summary

Relative paths in local HTML depend on the correct base URL.
With UIWebView, use loadHTMLString:baseURL: when loading HTML from a string.
Use a file URL request when the HTML file can be loaded directly.
Keep the bundle folder structure aligned with the paths used in the HTML.
For new code, prefer WKWebView, but the same resource-resolution principle still applies.

Load resources from relative path using local html in uiwebview

Master System Design with Codemia

Introduction

Why Relative Paths Fail

Load the HTML with a Base URL

Example HTML with Relative Resources

Load the File Directly When No HTML Manipulation Is Needed

Keep the Bundle Structure Intact

WKWebView Is the Modern Replacement

Common Pitfalls

Summary

`WKWebView` Is the Modern Replacement