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!
January 2nd, 2010 at 05:19
How to disable zooming and vertical scrolling in UIWebView?
January 2nd, 2010 at 21:31
@ashish: There is no easy way to disable zooming and vertical scrolling in a UIWebView. Although I have not tried it, one possible way could be to subclass UIWindow and override – (void)sendEvent:(UIEvent *)event. All UIEvents are passed through this method, so conceivably you could filter out the zooming and scrolling events here. There is some sample code in the project I created for my 360|iDev presentation that shows how to override the sendEvent method.
January 4th, 2010 at 00:00
Hi Nick
I used the same way as it is done in snoop window in this example 360|iDev presentation but the override ā (void)sendEvent:(UIEvent *)event. It didnt gave me success.
Then after hit and trial I come to some conclusion.
If I am using UIwebView from nib it gets default zooming behavior but if I create UIWebView progrmatically and add it as a sub view to View. Its zooming wont work. Thats what I need.
January 4th, 2010 at 02:01
One more thing to ask, is there a way to find vertical length of scroll means content length in UIWebView.
January 4th, 2010 at 09:45
I think this will give the content length
[[myWebview stringByEvaluatingJavaScriptFromString:@”document.body.offsetHeight”] floatValue]
January 4th, 2010 at 22:03
I am loading UIWebView using NSUrl . I have disabled scrolling as well as zooming in web view. Scrolling of webview happen by swiping the web view.
Now I want animation of turning pages when web view is scrolling down the content. Any help?
January 6th, 2010 at 22:00
@ashish: Remove the web view from its superview, add a new web view, and do it with a standard curl animation.
January 8th, 2010 at 07:06
Hi Nick,
How to change image size, width and height in UIWebView.
suppose the html file contains images with different size I want those images to fit inside the UiWebView.
I am not using [mywebView setScalesPageToFit:YES]; because it allows user to zoom.
Any other way to resize Images before loading into Webview might be using java script?
January 11th, 2010 at 07:44
@ashish: You might try changing the HTML width and height attributes of the images.
January 21st, 2010 at 06:35
I actually have sort of the opposite problem: I cannot zoom. I add a UIWebView as a Subview to my main View and load an image within. The image is shown, I set setScalesPageToFit to YES, this should allow me too zoom – so it says.
Any ideas on what I could be missing?
I would really appreciate it!
January 23rd, 2010 at 21:54
@Icky: That should work. It could be an HTML error. Try to load the same HTML in Safari on your iPhone and see if you can zoom the image.
January 31st, 2010 at 23:51
Does UIWebView cache the images loaded using img src tag. if so where do it cache in the iPhone and what is the time it keeps its content into its cache.
February 1st, 2010 at 13:30
@pramod: There seems to be a lot of confusion surrounding UIWebView and caching on the iPhone. I have not done any testing myself so unfortunately I cannot add any clarity. But this Stack Overflow entry seems to have the best overview of the situation.
March 7th, 2010 at 19:33
I am having the same problem as Ichy and I can’t find anyone that understands. I put a UIWebView in by adding as a subview, then I do a loadHtlm, and there is no zoom going on! I wrote out my problem in a zip file. It has the h and m files. please let me know anyone can fix the zoom on this and what the solution is. Any help would be appreciated as this is holding up a project of mine and could kill it entirely if I can’t find a solution. The zip is at http://www.timewalksoftware.com/files/NoZoomWebView.zip
– Thanks,
Sam
March 7th, 2010 at 19:35
Also, I tried many html chunks that zoom well in the iPhone safari and then copied them into this web view and they stopped zooming. No good!
– Sam
March 8th, 2010 at 14:42
I have the same problem as Ichy. I tried to post some code but my posts got pulled. Basically, I have a web page that is zoom-able in safari, I grab it’ html, put the html into a UIwebview, and the new web view isn’t zoom-able. Why is this? Everyone talks about it like its default behavior. Any help would be much appreciated.
– Sam
March 8th, 2010 at 15:08
@sam: Try changing the value of scalesPageToFit. Apple’s documentation has this to say about this attribute: “If YES, the webpage is scaled to fit and the user can zoom in and zoom out. If NO, user zooming is disabled. The default value is NO.”