升级cordova-file后Android端img标签无法显示本地图片

针对你遇到的cdvfile协议失效、file://路径被WebView拦截的问题，推荐以下两种可行方案：

方案一：使用官方提供的convertFileSrc方法（优先推荐） #

cordova-plugin-file 8.x版本内置了convertFileSrc工具方法，能将本地文件路径转换为WebView允许加载的安全URL（通常会转换为http://localhost/_app_file_/...格式的虚拟路径），完美绕过file://的访问限制。

代码示例： #

// 假设你已通过cordova.file.dataDirectory拼接得到本地文件路径
const localFilePath = cordova.file.dataDirectory + 'my_image.jpg';
// 转换为可在WebView中访问的URL
const webUsableUrl = window.cordova.file.convertFileSrc(localFilePath);
// 为img标签设置src
document.getElementById('target-img').src = webUsableUrl;

方案二：将文件转换为Base64 Data URI #

如果你的图片体积较小，可通过FileReader将本地文件读取为Base64编码的Data URI，直接作为img的src属性值。

代码示例： #

// 解析本地文件路径对应的FileEntry
window.resolveLocalFileSystemURL(cordova.file.dataDirectory + 'my_image.jpg', function(fileEntry) {
  fileEntry.file(function(file) {
    const reader = new FileReader();
    // 读取完成后设置img的src
    reader.onloadend = function() {
      document.getElementById('target-img').src = this.result;
    };
    // 以Data URI格式读取文件
    reader.readAsDataURL(file);
  }, function(error) {
    console.error('读取文件失败:', error);
  });
}, function(error) {
  console.error('解析文件路径失败:', error);
});

辅助配置（确保方案生效） #

在项目的config.xml中添加以下配置，确保WebView允许访问转换后的虚拟路径：

<allow-navigation href="http://localhost/*" />

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