iOS端Cordova图片选择器Documents目录图片无法通过<img>标签加载问题

问题分析：为什么Documents目录图片无法通过file://显示？ #

这个问题我之前帮开发者排查过不少次，核心原因其实是iOS沙盒权限机制 + WKWebView的安全限制在起作用：

• iOS应用的沙盒目录中，tmp/是临时存储目录，系统对WebView访问这个目录的限制非常宽松——毕竟里面的文件随时可能被系统清理，风险较低；
• 而Documents/是应用的持久化存储目录，属于用户核心数据的存储区，WKWebView（现在Cordova默认使用的WebView引擎）出于安全考虑，默认禁止直接通过file://协议访问该目录下的文件，防止恶意脚本窃取用户持久化数据；
• 两款插件返回路径的差异，本质是它们处理文件权限的逻辑不同：有的插件会自动把选中的图片复制到tmp/目录（规避权限问题），有的则直接返回原始的Documents/路径（未做权限适配）。

解决方案：让Documents目录图片正常显示的几种方法 #

1. 用Cordova File插件生成可访问的URL #

这是最推荐的方案，借助cordova-plugin-file提供的API，把原始沙盒路径转换成WebView可识别的安全URL：

// 假设你拿到的Documents路径是docPath
window.resolveLocalFileSystemURL(docPath, function(fileEntry) {
  // 获取可直接用于<img>标签的合法URL
  const usableUrl = fileEntry.toURL();
  // 给img标签赋值
  document.getElementById('myImage').src = usableUrl;
}, function(error) {
  console.error('解析路径失败:', error);
});

这个方法会自动处理WebView的权限适配，生成的URL是经过系统认可的，不会被拦截。

2. 配置WKWebView的访问权限 #

如果你的项目用的是WKWebView引擎，可以在config.xml中添加相关配置，放宽对file://协议的限制：

<platform name="ios">
  <preference name="AllowFileAccessFromFileURLs" value="true" />
  <preference name="AllowUniversalAccessFromFileURLs" value="true" />
</platform>

注意：这个方案会降低一点安全性（允许WebView从file://URL加载其他file://资源），适合信任所有本地资源的场景。

3. 调整内容安全策略（CSP） #

检查你的HTML头部的CSP元标签，确保允许加载file://协议的图片：

<meta http-equiv="Content-Security-Policy" content="img-src 'self' file://* data:;">

如果CSP里没有包含file://*，WebView会直接阻止加载Documents目录的图片资源。

4. 临时方案：复制文件到tmp目录 #

如果上面的方法都暂时没法用，可以把Documents里的图片复制到tmp目录再访问：

window.resolveLocalFileSystemURL(docPath, function(fileEntry) {
  window.resolveLocalFileSystemURL(cordova.file.tempDirectory, function(dirEntry) {
    fileEntry.copyTo(dirEntry, fileEntry.name, function(newFileEntry) {
      document.getElementById('myImage').src = newFileEntry.toURL();
    });
  });
});

不过这个方案会占用额外的存储空间，而且tmp目录的文件可能被系统自动清理，只适合临时展示的场景。

内容的提问来源于stack exchange，提问作者Xhua