Cordova-ios 6.x本地图片加载问题：如何通过cdvfile协议显示图片

嘿，我之前也碰到过cordova-ios升级到6.x后本地图片加载的困扰，其实不用依赖本地webserver插件，有内置的方法能解决，给你梳理下具体步骤：

• 先检查config.xml的权限配置
  cordova-ios 6.x对WebView的安全策略做了收紧，你需要在config.xml里添加两个关键配置，确保WebView允许从本地文件URL加载资源：

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

  这是cdvfile协议能正常工作的基础，没开的话很可能加载失败。

• 用cordova-plugin-file转换路径为可访问的URL
  你不能直接把cordova.file.dataDirectory拼接文件名作为img的src，得通过插件API把本地路径转换成WebView能识别的URL。用resolveLocalFileSystemURL方法就能做到，示例代码如下：

  // 假设你要加载的图片存在dataDirectory下，文件名为example.jpg
  const targetPath = cordova.file.dataDirectory + 'example.jpg';
  
  resolveLocalFileSystemURL(targetPath, (fileEntry) => {
      // 获取可直接赋值给img src的URL
      const usableUrl = fileEntry.toURL();
      // 给你的img元素设置src
      document.querySelector('#your-image-element').src = usableUrl;
  }, (err) => {
      console.error('获取文件URL出错:', err);
  });
  

  这里得到的usableUrl会是cdvfile://localhost/library-nosync/...这类格式，cordova-ios 6.x的WebView能直接识别加载，批量处理图片也完全没问题，不用走base64那套。

• 调整Content-Security-Policy（如果有设置的话）
  如果你页面里配置了CSP，得确保允许cdvfile和本地文件访问，比如在meta标签里这样写：

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

  不然CSP会拦截这些本地资源的加载请求。

最后别忘了确认cordova-plugin-file插件是最新兼容版本，没装的话执行这个命令安装：

cordova plugin add cordova-plugin-file@latest

这样处理后，你就能直接用内置方法通过cdvfile相关的URL加载dataDirectory里的图片，不用依赖额外的webserver插件啦。

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