Question

我正在下载图像文件并写入如下文档目录：

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];

在我的webView中，我从我的bundle资源中加载了一个html文件，以便在我的webView中使用，但是如何在html中使用标签来读取文档目录中的image.png？

<html>
<body>
    <img src="../what/is/the/path/to/use/image.png" />
</body>
</html>

Answer 1

您可以使用带有file://方案的绝对路径为此图片指定网址：

NSString *documentsDirectory = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask,YES)[0];
NSString *filePath = [NSString stringWithFormat:@"file://%@/image.png", documentsDirectory];

然后，您可以运行一些javascript来更新src标记，以将其更新为新路径：

NSString *javascript = [NSString stringWithFormat:@"var imageElement = document.getElementById('localFile'); imageElement.setAttribute('src', '%@');", filePath];
[self.webView stringByEvaluatingJavaScriptFromString:javascript];

在HTML中，路径看起来像是：

<html>
    <body>
        <img id="localFile" src="file:///var/mobile/Applications/3D7D43E8-FA5E-4B19-B74C-669F7D1F3093/Documents/image.png" />
    </body>
</html>

Answer 2

我只是在我的html内容中写下占位符而不是评估JavaScript，而是直接用所需的内容替换它：

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];

Answer 3

您可以从应用包中加载图像，但无法直接从文档目录加载图像。

但是有一个解决方法。

使用CocoaHTTPServer创建InAppHttpServer，您可以在Web视图中使用http URL访问文档目录中的图像。

或者

将图像转换为base64并使用webview的evaluatejavascript加载图像

document.getElementById('img').setAttribute( 'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' );

Answer 4

您无法从头开始绑定图像源。你必须通过JavaScript来完成它。

您需要通过评估JS将图像的路径传递给UIWebView。在这里，您可以传递图像的路径，JS会将图像加载到相应的HTML标记中。

如何从ios webview读取文档目录中的图像文件

4 个答案: