7

After browsing quite a bit, I still can't figure this out. I've added a HTML page and its images directory into my project Resources group in Xcode (Copied them over).

When I try to load the WebView with the following code, the text is displayed fine, but the images aren't loaded.

NSString *path = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"index.html"];
NSString *htmlContent = [NSString stringWithContentsOfFile:path];
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[[tempWebView mainFrame] loadHTMLString:htmlContent baseURL:url];

EDIT: Sorry about the delay, here's some basic html that failed.

<html>
    <body> 
        <img src="images/bg.png"></img> 
    </body>
</html>

And my edited code looks like this -

NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:path];
[[webView1 mainFrame] loadRequest:[NSURLRequest requestWithURL:url]];

EDIT2: Just realized it was an issue with the path. Apparently <img src = "images/bg.png"> doesn't work, but if I copy bg.png to the root directory and say <img src = "bg.png"> everything works fine. I'm still not sure where I'm going wrong with this.

Improve this question
1
  • Show us some sample HTML referencing an image. Commented Oct 7, 2010 at 22:38

4 Answers 4

Reset to default
8

Consider doing the following:

  1. Instead of getting the resource path and stapling a subpath onto it yourself, ask the bundle to give you the correct path.
  2. Instead of handling a path at all, ask the bundle to give you the correct URL. (Requires Mac OS X 10.6 or later.)
  3. Instead of injecting HTML contents directly into the frame, ask the WebView to load the URL.

This reduces your code to two lines that, if the HTML code is correct, will work.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Actually, my initial implementation was like that. But, I saw one of the SO questions where someone was having the same problem, but fixed it by implementing it this way. I was wondering if it has something to do with the baseURL maybe.
Tejaswi Yerukalapudi: Got a link to one of those questions?
Hmm, I can't seem to find it now, but I've edited my implementation to follow this. It appears that my issue is with using syntax that navigates to a sub-folders to grab the images in HTML. I kinda get why this is happening, but I'm not sure what I can do to fix it, thanks for all your help again!
Tejaswi Yerukalapudi: So if you look in the app bundle in your build folder, were you able to find the images directory copied there? (Also, there aren't supposed to be spaces around the equal sign in HTML.)
Oops, that was me just typing into SO directly, the original HTML doesn't have them. And, yes, the images were copied over.
|
4

I think that the problem here is to do with how files are copied to the resources directory during the build phase. Any folders that are shown as groups in Xcode will be flattened when they are copied across. If you are adding an entire website folder structure to your project you must select "Create folder references for any added folders" when adding the structure.

An example: I have an html file that references an image in a folder of the same name. I add all this into my project selecting 'folder references':

Adding the files

The files will look like this in my project (note the blue folder):

Project tree

When the project is built the web contents folder will be maintained:

Resources folder in the bundle

There is no need to start setting base URLs or loading with strings. The web page can now be successfully loaded like this:

NSURL *url = [[NSBundle mainBundle] URLForResource:@"LocalTestWeb" withExtension:@"html"];
[[self.webView mainFrame] loadRequest:[NSURLRequest requestWithURL:url]];
Improve this answer

Comments

3

This code works for me (only having issues with Canvas):

NSString* filePath = [[NSBundle mainBundle] pathForResource:@"index" 
                                                     ofType:@"html"
                                                inDirectory:@"html_files_folder"];
NSURL* fileURL = [NSURL fileURLWithPath:filePath];
NSURLRequest* request = [NSURLRequest requestWithURL:fileURL];
[[webView mainFrame] loadRequest:request];
Improve this answer

Comments

1

You will need to get the image file data in base64 string. And put that string in img tag as below.

<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." />

See this for more details: http://danielmclaren.com/node/90

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.