Using HTML and Local Images Within UIWebView

Question

I have a UIWebView in my app which I want to use to display an image which will link to another url   I m using   lt img src  image jpg    gt  to load the image    The problem is that the image doesn t load  ie  it can t be found  even though it s added as a resource in my project and is copied into the bundle   I ve tried using NSBundle to get the full path of the image and using that and it still doesn t show up in the web view   Any ideas

User · Answer

try use base64 image string   NSData  data   UIImageJPEGRepresentation image  1 0f    NSString  strEncoded    data base64Encoding        lt img src  data image png base64       gt  strEncoded

User · Answer

These answers did help me -- specifically the file   xxxxxxx xxx  but I had to do a workaround to display the image    In my case  I have an HTML file on my server which I download to the documents directory  I want to it to display with a local graphic in a UIWebView which I could not get to work   Here s what I did    Copy the file from the NSBundle to the local documents directory Reference the file in my HTML document as  file   filename png    So in startup copy the file to documents directory   - BOOL copyBundleFilesToDocumentsDirectoryForFileName  NSString   fileNameToCopy OverwriteExisting  BOOL overwrite             GET DOCUMENTS DIR           Search for standard documents using NSSearchPathForDirectoriesInDomains           First Param   Searching the documents directory           Second Param   Searching the Users directory and not the System           Expand any tildes and identify home directories          NSArray  paths   NSSearchPathForDirectoriesInDomains NSDocumentDirectory  NSUserDomainMask  YES           NSString  documentsDir    paths objectAtIndex 0              COPY FILE FROM NSBUNDLE File to Local Documents Dir         NSString  writableFilePath    documentsDir  stringByAppendingPathComponent fileNameToCopy            NSFileManager  fileManager    NSFileManager defaultManager           NSError  fileError           DDLogVerbose   File Copy From Bundle to Documents Dir would go to this path       writableFilePath            if   fileManager fileExistsAtPath writableFilePath                 DDLogVerbose   File    already exists in Documents Dir   fileNameToCopy                if  overwrite                     fileManager removeItemAtPath writableFilePath error nil                   DDLogVerbose   OLD File    was Deleted from  Documents Dir Successfully   fileNameToCopy                 else                   return  NO                                    NSArray  fileNameParts    fileNameToCopy componentsSeparatedByString                NSString  bundlePath     NSBundle mainBundle pathForResource  fileNameParts objectAtIndex 0  ofType  fileNameParts objectAtIndex 1            BOOL success    fileManager copyItemAtPath bundlePath toPath writableFilePath error  amp fileError            if  success                DDLogVerbose   Copied    from Bundle to Documents Dir Successfully   fileNameToCopy             else               DDLogError   File    could NOT be copied from bundle to Documents Dir due to error        fileNameToCopy  fileError                  return  success

User · Answer

I had a simmilar problem  but all the suggestions didn t help   However  the problem was the   png itself  It had no alpha channel  Somehow Xcode ignores all png files without alpha channel during the deploy process

User · Answer

Swift Version of Lithu T V s answer   webView loadHTMLString htmlString  baseURL  NSBundle mainBundle   bundleURL

User · Answer

Swift version of Adam Alexanders Objective C answer   let logoImageURL   NSURL fileURLWithPath     Bundle main bundlePath  PDF HeaderImage png

User · Answer

You can add folder  say WEB with sub folders css  img and js and file test html  to your project by choosing Add Files to  MyProj  and selecting Create folder references  Now the following code will take care about all the referred images  css and javascript  NSString  filePath     NSBundle mainBundle  pathForResource   WEB test html  ofType nil    webView  loadRequest  NSURLRequest requestWithURL  NSURL fileURLWithPath filePath

User · Answer

In Swift 3   webView loadHTMLString   lt img src   myImg jpg   gt    baseURL  Bundle main bundleURL    This worked for me even when the image was inside of a folder without any modifications

User · Answer

My complex solution  or tutorial  for rss-feed  get in RSSItems  works only on device    define CACHE DIR        NSSearchPathForDirectoriesInDomains NSCachesDirectory  NSUserDomainMask  YES  lastObject   for  RSSItem  item in  dataSource         url    NSURL URLWithString  item link        request    NSMutableURLRequest requestWithURL url        request setHTTPMethod   GET          NSURLConnection sendAsynchronousRequest request                                        queue queue                            completionHandler   NSURLResponse  response  NSData  data  NSError  error                                     autoreleasepool                                       if   error                                            NSString  html     NSString alloc  initWithData data                                                                               encoding NSWindowsCP1251StringEncoding                                                                                        NSError  error   nil                                              HTMLParser  parser     HTMLParser alloc  initWithString html error  amp error                                               if  error                                                   NSLog   Error       error                                                  return                                                                                           HTMLNode  bodyNode    parser body                                               NSArray  spanNodes    bodyNode findChildTags   div                                                for  HTMLNode  spanNode in spanNodes                                                   if    spanNode getAttributeNamed   class   isEqualToString   page                                                          NSString  absStr     response URL  absoluteString                                                      for  RSSItem  anItem in  dataSource                                                         if   absStr isEqualToString  anItem link                                                                 NSArray  spanNodes    bodyNode findChildTags   img                                                               for  HTMLNode  spanNode in spanNodes                                                                  NSString  imgUrl    spanNode getAttributeNamed   src                                                                   if  imgUrl                                                                       anItem setImage imgUrl                                                                      break                                                                                                                                                                                             anItem setHtml  spanNode rawContents                                                                self subProcessRSSItem anItem                                                                                                                                                                                                       parser release                                                                                    if  error                                               NSLog   Error       error                                              return                                                                                     NSNotificationCenter defaultCenter  postNotificationName notification updateDatasource                                                                                            object self                                                                                          userInfo nil                                        else                                        NSLog   Error   error userInfo                                                                      and  -  void subProcessRSSItem  RSSItem  item   NSString  html    item html   if  html         html    html stringByReplacingOccurrencesOfString    lt div class   clear   gt  lt  div gt                                              withString            html    html stringByReplacingOccurrencesOfString    lt p class   link   gt                                              withString            html    html stringByReplacingOccurrencesOfString    lt div class   page   gt                                              withString            html    html stringByReplacingOccurrencesOfString    lt  div gt                                              withString            NSArray  array1    html componentsSeparatedByString    lt a        if   array1 count   2            NSArray  array2    html componentsSeparatedByString   a gt              html     array1 objectAtIndex 0  stringByAppendingString  array2 objectAtIndex 1               NSURL  url      NSString  fileName      NSString  filePath      BOOL success      if   item image              url    NSURL URLWithString                         hostString stringByAppendingString  item image             NSData  imageData    NSData dataWithContentsOfURL url            fileName      url relativePath  componentsSeparatedByString       lastObject            filePath    NSString stringWithFormat                                         CACHE DIR                                fileName              save image locally         success     NSFileManager defaultManager  createFileAtPath filePath                                                                contents imageData                                                              attributes nil              replace links         html    html stringByReplacingOccurrencesOfString  item image                                                 withString filePath             item setImage fileName                                                                                             NSNotificationCenter defaultCenter  postNotificationName notification updateRow                                                             object self                                                           userInfo  NSDictionary dictionaryWithObject     dataSource indexOfObject item                                                                                                  forKey   row                  finalize html     html    NSString stringWithFormat    lt html gt  lt body gt    lt  body gt  lt  html gt   html        fileName      item link  componentsSeparatedByString       lastObject       filePath    NSString stringWithFormat                           CACHE DIR                  fileName       success     NSFileManager defaultManager  createFileAtPath filePath                                                       contents  html dataUsingEncoding NSUTF8StringEncoding                                                      attributes nil         item setHtml        success  filePath nil    for direct download in other case        on View controller  -  void viewDidAppear  BOOL animated   RSSItem  item     DataSingleton sharedSingleton  selectedRSSItem    NSString  htmlString    NSString stringWithContentsOfFile  item html                                                   encoding NSUTF8StringEncoding error nil   NSURL  baseURL    NSURL URLWithString CACHE DIR      webView loadHTMLString htmlString                  baseURL baseURL        rss item class   import  lt Foundation Foundation h gt    interface RSSItem   NSObject   property nonatomic retain  NSString  title   property nonatomic retain  NSString  link   property nonatomic retain  NSString  guid   property nonatomic retain  NSString  category   property nonatomic retain  NSString  description   property nonatomic retain  NSString  pubDate   property nonatomic retain  NSString  html   property nonatomic retain  NSString  image   end   part of any html with image   lt html gt  lt body gt   lt h2 gt blah-blahTC One Tab 7 lt  h2 gt   lt p gt blah-blah     One  lt  p gt   lt p gt  lt img width  600  height  412  alt    src   Users wins Library Application Support iPhone Simulator 5 0 Applications 2EAD8889-6482-48D4-80A7-9CCFD567123B Library Caches htc-one-tab-7-concept-1 1  jpg  gt  lt br gt  lt br gt  blah-blah  Hasan Kaymak  blah-blah HTC One Tab 7  blah-blah HTC One   lt br gt  lt br gt  blah-blah  microSD  lt br gt  lt br gt  blah-blah Wi-Fi to 4G LTE  lt  p gt   lt  p gt   lt  body gt  lt  html gt    image saved for name htc-one-tab-7-concept-1 1  jpg

User · Answer

Use this    webView loadHTMLString htmlString baseURL   NSBundle mainBundle  bundleURL

User · Answer

If you use relative links to images then the images won t display as all folder structures are not preserved after the iOS app is compiled  What you can do is convert your local web folder into a bundle instead by adding the   bundle  filename extension   So if you local website is contained in a folder  www   this should be renamed to  www bundle   This allows the image folders and directory structure to be preserved  Then load the  index html  file into the WebView as an HTML string with  baseURL   set to www bundle path  to enable loading relative image links   NSString  mainBundlePath     NSBundle mainBundle  resourcePath   NSString  wwwBundlePath    mainBundlePath stringByAppendingPathComponent   www bundle    NSBundle  wwwBundle    NSBundle bundleWithPath wwwBundlePath   if  wwwBundle    nil        NSURL  baseURL    NSURL fileURLWithPath  wwwBundle bundlePath        NSError  error   nil      NSString  page     NSBundle mainBundle  pathForResource   index html  ofType nil       NSString  pageSource    NSString stringWithContentsOfFile page encoding NSUTF8StringEncoding error  amp error        self webView loadHTMLString pageSource baseURL baseURL

User · Answer

Using relative paths or file  paths to refer to images does not work with UIWebView  Instead you have to load the HTML into the view with the correct baseURL   NSString  path     NSBundle mainBundle  bundlePath   NSURL  baseURL    NSURL fileURLWithPath path    webView loadHTMLString htmlString baseURL baseURL     You can then refer to your images like this    lt img src  myimage png  gt     from uiwebview revisited

User · Answer

I just ran into this problem too  In my case  I was dealing with some images that were not localized and others that were--in multiple languages  A base URL didn t get the images inside localized folders for me  I solved this by doing the following      make sure you have the image name and extension  for demo purposes  I m using  myImage  and  png  for the file  myImage png   which may or may not be localized  NSString  imageFileName     myImage   NSString  imageFileExtension     png       load the path of the image in the main bundle  this gets the full local path to the image you need  including if it is localized and if you have a  2x version  NSString  imagePath     NSBundle mainBundle  pathForResource imageFileName ofType imageFileExtension       generate the html tag for the image  don t forget to use file    for local paths  NSString  imgHTMLTag    NSString stringWithFormat    lt img src   file          gt    imagePath     Then  use imgHTMLTag in your UIWebView HTML code when you load the contents   I hope this helps anyone who ran into the same problem

User · Answer

After having read a couple of chapters in the iOS 6 Programming Cookbok and started to learn objective-c and iOS programming  I would just like to add  that if one is going to load resources from a custom bundle and use that in a web view  it can be accomplished like this   NSString  resourcesBundlePath     NSBundle mainBundle  pathForResource   Resources  ofType   bundle    NSBundle  resourcesBundle    NSBundle bundleWithPath resourcesBundlePath    self outletWebView loadHTMLString  html description  baseURL  resourcesBundle bundleURL      Then  in your html you can refer to a resource using the  custom  bundle as your base path   body       background-image url  img myBg png

[html] Using HTML and Local Images Within UIWebView

Examples related to html

Examples related to ios

Examples related to iphone

Examples related to uiwebview

Examples related to uikit