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