How to read image file at documents directory from ios webview
Question
I am downloading image file and write to documents directory like below:
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString *objURL = @"http://test.test.com/file/image.png";
NSURL *objurl = [NSURL URLWithString:objURL];
NSData *imgData = [NSData dataWithContentsOfURL:objurl];
NSString *imgFile = [NSString stringWithFormat:@"%@/%@", documentsDirectory,@"image.png"];
[imgData writeToFile:imgFile atomically:YES];
In my webView, I loaded a html file from my bundle resource to use in my webView, but how do I have the tag in html to read the image.png in documents directory?
<html>
<body>
<img src="../what/is/the/path/to/use/image.png" />
</body>
</html>
4 answers
solution1
2 ACCPTED 2013-07-05 18:32:22
You could give the URL for this image using an absolute path with a file:// scheme:
NSString *documentsDirectory = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES)[0];
NSString *filePath = [NSString stringWithFormat:@"file://%@/image.png", documentsDirectory];
You could then run some javascript to update the src tag to update it to the new path:
NSString *javascript = [NSString stringWithFormat:@"var imageElement = document.getElementById('localFile'); imageElement.setAttribute('src', '%@');", filePath];
[self.webView stringByEvaluatingJavaScriptFromString:javascript];
In your HTML the path would look like something like:
<html>
<body>
<img id="localFile" src="file:///var/mobile/Applications/3D7D43E8-FA5E-4B19-B74C-669F7D1F3093/Documents/image.png" />
</body>
</html>
solution2
2 2016-01-21 04:10:01
Instead of evaluating JavaScript, I just write down a placeholder in my html content, and replace it directly w/ the content needed:
NSString *htmlFilePath = [[NSBundle mainBundle] pathForResource:@"sample" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:htmlFilePath encoding:NSUTF8StringEncoding error:&error];
if (error) {
// handle error
return;
}
NSString *imageFilePath = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject] stringByAppendingPathComponent:@"sample_image.png"];
NSURL *imageFileURL = [NSURL fileURLWithPath:imageFilePath];
NSString *sampleImageReplacement =
[NSString stringWithFormat:@"<img src=\"%@\" />", [imageFileURL absoluteString]];
// Replace the placeholder w/ real content,
// and of course, we can also replace it w/ empty string
// if the image cannot be found.
htmlString = [htmlString stringByReplacingOccurrencesOfString:@"%sample_image%"
withString:sampleImageReplacement];
...
[webView loadHTMLString:htmlString baseURL:nil];
solution3
1 2016-08-19 06:46:51
You can load the images from the app bundle but you can not load the images from the documents directory directly.
But there is a work around.
Use CocoaHTTPServer to create a InAppHttpServer and you can access the images in documents directory using http URL in web view.
or else
Convert the image into base64 and load the image using evaluatejavascript of webview
document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );
solution4
0 2013-07-05 18:31:54
You can not bind image source from beginning. You will have to do it via JavaScript.
You need to pass the path of the image to UIWebView by evaluating JS. Here you can pass the path of your image and JS will load the image into respective HTML tag.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.