Cordova[Android平台]从API 29迁移至API 30后本地图片无法显示求助

问题根因 #

Cordova Android 10.0.0及以上版本为了提升安全性，默认将WebView的setAllowFileAccess配置设为false，禁止WebView直接加载file://协议的本地资源；同时Android 11（API 30）强化了分区存储规则，进一步限制了WebView对应用私有目录文件的直接访问权限，导致你存储在cordova.file.dataDirectory下的图片无法通过原路径正常加载。

可行解决方案 #

按优先级从高到低依次尝试：

1. 开启WebView本地文件访问权限
   在项目config.xml的Android平台配置块中添加如下配置，即可恢复旧版本的文件访问逻辑：

<platform name="android">
  <!-- 新增这行配置 -->
  <preference name="AndroidInsecureFileModeEnabled" value="true" />
  <!-- 原有其他配置保持不变 -->
</platform>

注意：该配置仅支持Cordova Android 10.0.0及以上版本，开启后会降低WebView安全性，仅适合内部使用、无外部不可信内容加载的应用

2. 配置白名单访问规则
   确认cordova-plugin-whitelist插件已放开本地资源访问限制，在config.xml中添加如下配置：

<access origin="file://*" />
<allow-navigation href="file://*" />
<allow-intent href="file://*" />

3. 转base64加载本地资源（更安全的方案）
   如果不想降低WebView安全配置，可以通过cordova-plugin-file提供的readAsDataURL接口读取本地图片文件，转成base64字符串后直接绑定到AngularJS视图的img标签src属性，不需要修改任何全局配置，兼容性和安全性更高。

4. 分区存储兼容配置
   如果上述配置都不生效，在AndroidManifest.xml的application节点添加legacy存储适配配置：

<application
  android:requestLegacyExternalStorage="true"
  <!-- 原有其他属性保持不变 -->
>

如果你的应用仅访问应用私有目录dataDirectory，不需要申请读写外部存储权限，该配置仅用于兼容旧版文件访问逻辑。

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