iOS UIWebView 載入本地 HTML5 顯示問號圖片？路徑遺漏 JS/CSS 檔案導致資源載入失敗

現象

• 專案中加入 index.html、style.css、app.js 等本地 HTML5 資源。
• UIWebView 載入 index.html，畫面出現大量「問號圖片」佔位符，樣式/腳本失效。

根因

HTML 內引用的相對路徑資源（JS、CSS、圖片）未實際加入 Xcode 專案的 Copy Bundle Resources 階段，導致運行時在 App Sandbox 內找不到對應檔案，UIWebView 呈現破圖。

解決步驟

1. 在 Xcode 專案導航區選中專案 → Build Phases → 展開 Copy Bundle Resources。
2. 點擊 +，將 style.css、app.js、圖片資料夾等全部加入。
3. 確認 Target Membership 勾選正確 Target。
4. Clean Build Folder (Shift+Cmd+K) 後重新運行。

程式碼載入範例

// 假設 HTML 放在專案根目錄下的 www 資料夾
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"www"];
NSURL *url = [NSURL fileURLWithPath:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];

重要提醒：UIWebView 已棄用

自 iOS 12 起，Apple 正式棄用 UIWebView，App Store 審核會警告。新專案請直接使用 WKWebView（WebKit.framework），效能更好、記憶體更低、支援現代 Web 標準。

WKWebView 載入本地資源關鍵差異

let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "www")!
let request = URLRequest(url: url)
webView.loadFileURL(url, allowingReadAccessTo: url.deletingLastPathComponent())

loadFileURL(_:allowingReadAccessTo:) 需明確授予讀取權限給資源所在目錄，否則同樣會因 Sandbox 限制而載入失敗。