cordova：如何使用持久存储中的图像作为 img 标签的来源？

Question

我能够遍历 api 以获得 3 张图像的列表。 每张照片都被下载并保存在持久存储中。

然后我读取每张保存图像的 url，这样我就可以在页面上显示它们

请参阅此图像显示单个条目

• 倒数第二行是变量命名path中的文件名
• 最后一行是localFileUrls[image.id]

这是相关代码

let path = fileName(image);

localFileUrls[image.id] = "";

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
  let options = { create: false };

  fs.root.getFile(
    path,
    options,

    // file found on disk successCallback (parameter is a fileEntry)
    function (fileEntry) {
      console.log("file " + path + " EXISTS", fileEntry);
      localFileUrls[image.id] = fileEntry.toInternalURL();
    },

如您所见，我将internalUrl保存到localFileUrls js object

我尝试使用nativeUrl但没有任何变化

在这种特定情况下，控制台会记录一个不同的错误

问题

问题是（在 Android 模拟器上运行）如果我使用内部 Url 作为图像源，则不起作用！

正如您在图片中看到的，有一张图片没有被加载； 此图像使用内部 Url（最后一行）作为来源。 查看检查过的源代码

题

我应该怎么做才能使用本地图像作为<img>标签的来源？

权限

我试图将这些条目添加到src-cordova\config.xml以自动移植到config.xml但是，在移植工作时，这些权限不会改变任何东西

 <allow-navigation href="file:*" />
<preference name="AndroidPersistentFileLocation" value="Internal" />

Answer 1

我对此不确定，但我的 config.xml 中有一些可能与此相关的首选项。 由于您的控制台显示不允许您加载该文件，因此我假设您缺少一些授予权限的内容：在顶层：

<preference name="allowFileAccessFromFileURLs" value="true" />
<preference name="allowUniversalAccessFromFileURLs" value="true" />

在<android>里面：

<preference name="AndroidInsecureFileModeEnabled" value="true" />

插件（也在顶层）：

    <plugin name="cordova-plugin-filepath" 
    spec="git+https://github.com/jonmaim/cordova-plugin- 
   filepath.git" />
    <plugin name="cordova-plugin-file" spec="^6.0.1" />
    <plugin name="cordova-plugin-file-transfer-ios-fix" spec="^1.7.2" />
    <plugin name="cordova-plugin-file-opener2" spec="^2.0.19" />

我不确定需要哪些插件来解决您的问题，我将从文件插件开始。 文档： https://cordova.apache.org/docs/en/11.x/reference/cordova-plugin-file/