IOS: insert UIImage inside html string references

Question

I have this NSString with html

NSString* html = [NSString stringWithFormat:@"<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta name=\"viewport\" content=\"width=device-width\" /><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /><title>Request</title><link rel=\"stylesheet\" type=\"text/css\" href=\"email.css\" /></head><body bgcolor=\"#FFFFFF\"><table class=\"body-wrap\"><tr><td></td><td class=\"container\" bgcolor=\"#FFFFFF\"><div class=\"content\"><table><tr><td><center><img src=\"./top.jpg\" style=\"margin-top: -5px; margin-bottom: 5px;\"/><img src=\"./bottom.jpg\" alt=\"\" style=\"width: 250px;\"/></center><h3>The User %@ %@</h3><p class=\"lead\">read this email.</p><p>REQUEST: %@</p><p>NAME: %@</p><p>SURNAME: %@</p><p>NUMBER: %@</p><p>CODE: %@</p><p>EMAIL: %@</p></td></tr></table></div></td><td></td></tr></table></body></html>", @"Name",@"Surname", @"Center", @"Name1", @"Cognome1", @"Number", @"code", @"email"];

In this html code there are two images: top.jpg and bottom.jpg, and I want to know waht's the way to pass at this code the local path of these two images, so I can visualize them.

thanks

Are the local paths to local to the iOS device or the local path of your computer? I'm a tad confused. — John Riselvato, Jul 10 '13 at 14:31
NSString *top_image = [[NSBundle mainBundle]pathForResource:@"top" ofType:@"jpg"]; NSString *bottom_image = [[NSBundle mainBundle]pathForResource:@"bottom" ofType:@"jpg"]; local in project iOS — cyclingIsBetter, Jul 10 '13 at 14:32

JohnVanDijk · Accepted Answer · 2013-07-10T16:11:14.453

NSString* html = [NSString stringWithFormat:@"<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta name=\"viewport\" content=\"width=device-width\" /><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /><title>Request</title><link rel=\"stylesheet\" type=\"text/css\" href=\"email.css\" /></head><body bgcolor=\"#FFFFFF\"><table class=\"body-wrap\"><tr><td></td><td class=\"container\" bgcolor=\"#FFFFFF\"><div class=\"content\"><table><tr><td><center><img src=\"./top.jpg\" style=\"margin-top: -5px; margin-bottom: 5px;\"/><img src=\"./bottom.jpg\" alt=\"\" style=\"width: 250px;\"/></center><h3>The User %@ %@</h3><p class=\"lead\">read this email.</p><p>REQUEST: %@</p><p>NAME: %@</p><p>SURNAME: %@</p><p>NUMBER: %@</p><p>CODE: %@</p><p>EMAIL: %@</p></td></tr></table></div></td><td></td></tr></table></body></html>", @"Name",@"Surname", @"Center", @"Name1", @"Cognome1", @"Number", @"code", @"email"];
UIWebView *temp = [[UIWebView alloc] initWithFrame:CGRectMake(startX, startY, width, height)];
NSData *htmlData = [self parseStringToHTML:html];
[temp loadData:_htmlData MIMEType:@"text/html" textEncodingName:@"utf-8"  baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];

That should do the trick. The key thing is baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]

The baseURL tells the UIWebView where to look for any resources that it's contents might need.

Those who don't want to do anything with webViews but want to make images a part of your html string can do this : Add Base64 class www.imthi.com/wp-content/uploads/2010/08/base64.zip in your project. Now encode as:

NSData* data = UIImageJPEGRepresentation(yourImage, 1.0f);
[Base64 initialize];
NSString *strEncoded = [Base64 encode:data];

Now in your html string replace src=\"./bottom.jpg\" by an NSString with the following format:

@"src="data:image/jpg;base64,%@",strEncoded

I should send this html in an email and not load it in a webview — cyclingIsBetter, Jul 10 '13 at 14:44
I don't understand. Do you want to email this html to someone and not display it in a webView? If so, do you want to send these images with the html? Or will the receiver have them? Is the receiver an iOS device too? — JohnVanDijk, Jul 10 '13 at 14:47
yes, I don't show it in a webview, and I don't need "[temp loaddata..." but I need to sent this html with an email with "SKPSMTPMessage", it work all fine but I want show two images — cyclingIsBetter, Jul 10 '13 at 14:51
http://stackoverflow.com/questions/1207190/embedding-base64-images http://stackoverflow.com/questions/11251340/convert-image-to-base64-string-in-ios — JohnVanDijk, Jul 10 '13 at 15:03
actually you can convert those images to base64 online here http://www.base64-image.de/ — JohnVanDijk, Jul 10 '13 at 15:11
but in my string of html this @"src="data:image/jpg;base64,%@",strEncoded don't work fine — cyclingIsBetter, Jul 10 '13 at 20:20

score 1 · Answer 2 · answered Aug 15 '18 at 18:26

Swift 4

let data = UIImagePNGRepresentation(your_imageView) //be careful! If the image is a Jpeg you have to use UIImageJPEGRepresentation. Use the corresponding method to the image type.

if let imageITData = data?.base64EncodedString() {
    significatoHTMLContent = significatoHTMLContent.replacingOccurrences(of: "#FLAG-ITA#", with: "<img src=\"data:image/png;base64,\(imageITData)\" alt=\"Flag Ita\">")
}
//This is a my html file in which I insert an image. What you need to insert the image is that:<img src=\"data:image/png;base64,\(imageITData)\" alt=\"Flag Ita\">

score 0 · Answer 3 · answered May 09 '19 at 13:36

if let image = yourObject.thePropertyUIImage, let data = image.pngData() {
        let base64 = data.base64EncodedString(options: [])
        let imageForTheHtml = "data:application/png;base64," + base64
        let html = "<html><head></head><body><img src='\(imageForTheHtml)'></body></html>"
        webView.loadHTMLString(html, baseURL: URL(fileURLWithPath: ""))
    }

IOS: insert UIImage inside html string references

3 Answers3