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,
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Here’s a great tool for converting any small image to the base64 encoding required by data:image:

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

written by Nick \\ tags: , ,

33 Responses to “Display Images in UIWebView”

  1. Patrick Calahan Says:

    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. ?

  2. Nick Dalton Says:


    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. šŸ™‚


  3. John Kramlich Says:

    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.

  4. Alex Says:

    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.


  5. Dimitri Giani Says:

    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?

  6. Ben Sussman Says:


    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

  7. Eric Long Says:

    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.

  8. Mary Says:

    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?

  9. imaumac Says:

    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

  10. Accident Claims Says:

    I think you should point out the another side of the topic too… Hats Off to the discussion.

  11. Nick Says:

    Here’s finally the post that explains how to load images from the file system:
    UIWebView Revisited

  12. Gabe Says:

    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,


  13. Nick Says:

    @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.

  14. Adrian Says:

    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.


  15. Nick Says:

    @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.

  16. Adrian Says:

    Yep I think your right.

    Just wondering if there is any code out there for tiling that you are aware of.


  17. ashish Says:

    How to disable zooming and vertical scrolling in UIWebView?

  18. Nick Says:

    @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.

  19. ashish Says:

    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.

  20. ashish Says:

    One more thing to ask, is there a way to find vertical length of scroll means content length in UIWebView.

  21. ashish Says:

    I think this will give the content length
    [[myWebview stringByEvaluatingJavaScriptFromString:@”document.body.offsetHeight”] floatValue]

  22. ashish Says:

    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?

  23. Nick Says:

    @ashish: Remove the web view from its superview, add a new web view, and do it with a standard curl animation.

  24. ashish Says:

    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?

  25. Nick Says:

    @ashish: You might try changing the HTML width and height attributes of the images.

  26. Icky Says:

    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!

  27. Nick Says:

    @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.

  28. pramod Says:

    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.

  29. Nick Says:

    @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.

  30. Sam Says:

    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,

  31. Sam Says:

    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

  32. sam Says:

    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

  33. Nick Says:

    @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.”

Leave a Reply