使用cordova-plugin-file查找并打开图片——Android平台解压后图片无法显示问题求助

我之前在使用Cordova开发图片处理类应用时，遇到过完全一样的问题——明明文件存在且路径正确，但<img>标签就是加载不出来。结合你的环境（Cordova 10 + cordova-plugin-file v6.0.2），给你几个亲测有效的解决方案：

1. 先处理WebView的访问权限限制 #

Cordova的WebView默认会限制直接访问file://协议的本地文件，你需要先在config.xml中添加允许导航到Cordova文件协议的配置：

<allow-navigation href="cdvfile://*"/>
<allow-navigation href="file://*"/> <!-- 可选，针对部分旧版本WebView -->

这一步是基础，没有它后续的路径转换也没用。

2. 不要直接用本地路径，转成Cordova兼容的URL #

你直接写<img src="file:///storage/emulated/0/Android/data/<app.id>/files/xxx.jpg">是无法被WebView识别的，必须通过cordova-plugin-file的API将本地路径转换成cdvfile://协议的URL。示例代码：

// 假设你的解压后图片路径是这个
const imgLocalPath = cordova.file.externalDataDirectory + "test.jpg";

window.resolveLocalFileSystemURL(imgLocalPath, function(fileEntry) {
    // 转换为WebView可访问的URL
    const usableImgUrl = fileEntry.toURL();
    // 设置给img标签
    document.getElementById("your-img-id").src = usableImgUrl;
}, function(error) {
    console.error("解析文件路径失败：", error);
});

这个方法的核心是利用FileEntry.toURL()生成符合WebView安全规则的访问地址，我当初就是靠这一步解决了图片加载问题。

3. 检查Android权限与Scoped Storage适配 #

针对Android 10及以上版本的Scoped Storage机制，你需要确保：

• 在AndroidManifest.xml中添加必要权限（如果是通过Cordova配置，也可以在config.xml中配置）：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

• 如果你的应用还需要兼容旧的存储访问逻辑，可以在<application>标签中添加：

<application android:requestLegacyExternalStorage="true" ...>

注意：这个属性在Android 11+会被忽略，长期来看还是建议适配Scoped Storage，但临时解决问题是有效的。

4. 验证解压后的文件状态 #

有时候看似路径正确，但文件可能损坏或者权限不对。你可以用cordova-plugin-file的API检查文件是否存在、权限是否正常：

window.resolveLocalFileSystemURL(imgLocalPath, function(fileEntry) {
    fileEntry.getMetadata(function(metadata) {
        console.log("文件大小：", metadata.size);
        console.log("最后修改时间：", metadata.modificationTime);
        // 能获取到这些信息说明文件权限没问题
    }, function(error) {
        console.error("获取文件元数据失败：", error);
    });
}, function(error) {
    console.error("文件不存在：", error);
});

按这个步骤排查下来，应该就能解决图片无法显示的问题了。我当初就是先配置了WebView导航权限，再用路径转换的方法，瞬间就加载出图片了。

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