Apr 03
A UIWebView is great for displaying rich text; you just format your text as HTML. But how do you display images in a UIWebView?
Since the iPhone is almost always connected you could just use a regular image tag referencing an image on a server somewhere:
<img src="http://example.com/img/foo.png" />
But that is less than optimal. What you really want to do is reference an image on the iPhone. One way to do this is to embed the image in the HTML using the data: URI scheme. Here’s an example:
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
Here’s a great tool for converting any small image to the base64 encoding required by data:image:
www.abluestar.com/utilities/encode_base64/index.php
Adding images this way will allow you to create great looking, self-contained help files and about us pages for your iPhone applications.
July 29th, 2008 at 23:22
Neat trick, though I’m not sure why this is simpler than just copying the html and images into the app together and referring to the images via a relative path in the img tag. ?
July 30th, 2008 at 15:24
Patrick,
One small reason is performance: loading one file is slightly faster then having to make multiple requests for images.
But the main reason is that at the time I was having trouble getting HTML to load images from the file system.
Nick
August 25th, 2008 at 18:16
Nick, I have created a native app that uses UIWebView to load HTML from a remote server. I would love to be able to locally store the content that doesn’t frequently change; css, javascript library and images. Do you know how to achieve this? I would imagine I would need to place the content in my resources directory of the xcode project but I do not know the URL that I would put in the src attributes of the various elements.
September 5th, 2008 at 23:04
hi Nick, did you eventually succeeded in making WebView load images from the file system? I’m struggling with this for a while now, and this post comes first when searching for “uiwebview local image”.
what i want is load a html with local images (i was successful loading the html but not loading the images, since i don’t know their urls..) . and since they are big(er) images, i can’t use the base64 encoding.
Help?
September 10th, 2008 at 01:50
Hi!
Thanks for the hint!
But, if I want to use images from my app?
I use the UIWebView like this:
[webView loadHTMLString:newHTML baseURL:[NSURL URLWithString:[[NSBundle mainBundle] bundlePath] ]];
But when I refer my images with: background: url(’pippo.jpg’) the image is not loaded.
This is your same problem?
September 19th, 2008 at 22:12
Patrick,
I have tried the “relative path” strategy but have so far been unsuccessful. Where is the path relative to? I have tried being relative to the groups in Xcode or to the base folder that the xcode project is but neither was successful. The “base64″ solution seems great, but is there a way to procedurally generate the data for an image? I would rather not go to Abluestar’s converter for every one of my hundreds of images.
Thanks, Ben
October 18th, 2008 at 07:58
UIWebView has no problem resolving relative paths to local images. If they are not displaying, the image is missing or the path is not what you expected. Take a look inside your bundle. If your images are not where you expected related to your html file, then things won’t resolve correctly.
One way this can happen is if you add a “MyApplication Help” folder to your project containing a index.html file and an images subfolder, but the folder hierarchy isn’t recreated in your bundle because when you added the MyApplication Help folder without selecting “Create Folder References For Any Added Folders” in Xcode. You can easily fix this by removing the folder and readding it to the project.