6

我在 angular/ionic/cordova 应用程序中显示下载到 cordova.file.dataDirectory 的图像时遇到问题。

我正在使用cordova-plugin-file，我可以下载文件，并使用.toInternalURL() 和/或.toURL() 提取URL。然而，角度列表视图正在拒绝它们。我正在为 Ios 使用 WkWebView，并且我的代码在 Android 上运行良好（使用 .toInternalURL() ）。我已经在配置和元内容安全策略中将 cdvfile://* 和 file:///* 列入白名单...

我添加了屏幕截图 这是 .toInternalURL() 生成的链接的控制台屏幕截图

这是 .toURL() 生成的链接的屏幕截图：

这是我使用的安全策略：

<meta http-equiv="Content-Security-Policy" content="default-src * data: cdvfile://* content://* file:///*; style-src 'self' 'unsafe-inline' *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; media-src *">
4

4 回答 4

6

好的，事实证明我的问题是WKWEBVIEW。我一直在使用它，但没有意识到这是我问题的根源。

因此，要在 src 属性中使用存储的图像路径，请不要使用 cdvfile:// 或 file:///。而是创建一个如下所示的路径：

http://localhost:12344/Library/NoCloud/ho_tylw7Ygc.jpg

在entry.fullPath 前添加“ http://localhost:12344/Library/NoCloud ”，您就可以指向应用程序的 dataDirectory。

于 2015-09-15T18:33:13.380 回答
1

对于使用 Ionic 3 的人来说，这确实对我有用：

import {normalizeURL} from 'ionic-angular';

normalizeURL(cordova.file.dataDirectory + file.fullPath)

也许这更防弹，因为它依赖于 cordova.file.dataDirectory 而不是硬编码字符串

于 2018-12-18T23:27:21.810 回答
1

另一种不涉及使用本地网络服务器的方法是使用来自 blob 的 URL.createObjectURL 创建 URL。只需确保在使用完 URL 后撤消它，以避免内存泄漏。

请注意，您需要将“blob：”添加到 Content-Security-Policy 中的 default-src：

为此，您需要将文件条目作为 ArrayBuffer 读取，创建一个 blob，然后创建一个 URL，如果您将“blob:”添加到 Content-Security-Policy，此 URL 适用于视频和图像

const reader = new FileReader();
reader.onloadend = function() {
    const blob = new Blob([this.result]);
    url = URL.createObjectURL(blob));
};
reader.readAsArrayBuffer(fileentry);

完成后，说当他们移动到另一个页面时撤销 URL：

URL.revokeObjectURL(url)

我有一个帮助模块，可以跟踪所有 URL，当路由更改时，我调用 clearBlobURLs 将它们全部撤消。

const urls:string[] = [];

function createBlobURL(blob:Blob) : string {
    const url = URL.createObjectURL(blob);
    urls.push(url);
    return url;
}

function clearBlobURLs() {
    urls.forEach(url => {
        URL.revokeObjectURL(url);
    })
}

export {createBlobURL,clearBlobURLs};
于 2019-08-02T17:57:37.907 回答
1

为了使它工作，我必须做以下技巧：

  1. 我将“本地文件系统”后缀添加到 url http://localhost:potr/local-filesystem/
  2. 然后我添加了我在 file:// 之后的整个路径，例如http://localhost/:port/local-fileystem//Users/ ...
  3. 但是为了让事情顺利进行，如果您查看 document.location.href，您将看到 cdvToken 参数。需要将其添加到您作为 ?cdvToken=blah-blah-blah 烘焙的 url

直到后来，事情才开始起作用。请注意，我使用 'local-webserver' npm pacakge 作为 cordova-labs-local-webserver（版本 1.0.0-dev。）在其他版本中可能会有所不同。

于 2017-04-10T12:53:14.793 回答