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.
Update: See this post for an alternate way to display images: UIWebView - Loading External Images and CSS
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.
November 23rd, 2008 at 13:19
Was the question ever answered..how to make UIWebView open a local image file? I passed UIWebView an html string and embedded in the string was a local path to my application bundle which I think is correct..but UIWebView couldn’t process the image…
Any thoughts?
December 22nd, 2008 at 12:10
i have 1 buttons calling 1 html, all works fine, but
if I press 7 times this button, and call 7 times the same html and clean, anc call..etc… the aplication crash.
with activity monitor I have discovered something:
the memory increases every time i call the same HTML,
how can i fix this please ?
thanks for your help
December 23rd, 2008 at 07:29
I think you should point out the another side of the topic too… Hats Off to the discussion.
December 23rd, 2008 at 23:48
Here’s finally the post that explains how to load images from the file system:
UIWebView Revisited
December 24th, 2008 at 08:23
can you teach us how to do something like “Space picture a day.” Basically all this is, is a webview of a site that just rotates the pictures. The problem is, I have no idea how to make the site. Thanks, and keep up the great work,
-Gabe
December 24th, 2008 at 21:55
@Gabe: The easiest way is probably to use the meta refresh tag in the HTML to rotate pictures. No special programming required on the iPhone side.
December 27th, 2008 at 08:50
Hey Nick,
Great article.
I am trying to build an app that displays high resolution image files and allows users to zoom right in.
The problem is that the standard UIWebView (which we are currently using) is not adequate, as the images are too big for it to display.
If you have any ideas, I’d be really appreciative.
Cheers!
January 3rd, 2009 at 13:04
@Adrian: The iPhone chokes on images larger than 1000 x 1000 pixels, officially. (In my testing I’ve found that you can usually go up to 2k x 2k.) If you need to display larger images than that you have to break them up into tiles. Laying out UIImages as tiles on a UIScrollView is not that difficult. If you want to zoom in several levels with more detail revealed then you probably have to replace the tiles at certain zoom levels. This is what the Maps app and Seadragon Mobile do.
January 7th, 2009 at 11:34
Yep I think your right.
Just wondering if there is any code out there for tiling that you are aware of.
Cheers!