ios - Ionic 1 应用程序 - 尝试从 Cordova dataDirectory 提供图像文件

Question

我的设置:

local packages: Cordova Platforms : android 6.1.2 ios 4.4.0 Ionic Framework : ionic1 1.3.2 Cordova CLI 7.0.1 and latest ionic as of today

我有一个 Ionic 1 应用程序，它下载一组图像并通过此处的 Cordova 文件插件存储它们:cordova.file.dataDirectory。然后我试图展示这些图像，但遇到了一些麻烦。我在 WKWebView 中使用 MacBook Pro、Xcode 8 和 iOS 10(为了性能)，尽管我切换到 UIWebView 的结果相同。

sharedSvc.getDetails($stateParams.id).then(function (data) {
    angular.forEach(imgData, function (value, key) {
        $cordovaFile.checkFile(cordova.file.dataDirectory+data.state+'/'+data.image_id+'/', value.image).then(function (success) {
            $scope.imgArr.push({src: cordova.file.dataDirectory+data.state+'/'+data.image_id+'/'+value.image});
            console.log('PUSHING - '+imgSrc);
        }, function(error) {
            console.log('Check for file bad1: '+cordova.file.dataDirectory+data.state+'/'+data.image_id+'/'+value.image);
            //console.log(JSON.stringify(error));
        });
    });
});

然后我尝试显示图像:

<img ng-repeat="image in imgArr" src="{{image.src}}" />

作为引用，我的 config.xml 文件中有以下项目:

<access allows-arbitrary-loads-in-media="true" allows-arbitrary-loads-in-web-content="true" allows-local-networking="true" origin="*" />
<access allows-arbitrary-loads-in-media="true" allows-arbitrary-loads-in-web-content="true" allows-local-networking="true" origin="file:///*" />
<allow-navigation href="file://*/*" />
<allow-intent href="file://*/*" />

其中一些可能是不必要的，但在我寻找可能的答案时添加了它们。有些人向我指出了白名单问题，因此添加了这些内容。

我可以验证图像是否存在，如顶部代码块中的 checkFile 调用所示。当我手动导航到这些图像时，它们就在那里并且大小正确。此外，控制台日志显示文件的正确路径。但是，当应用程序在模拟器(以及我的物理设备)中运行时，图像是空白的。

在搜索了一整天的解决方案之后，我在这里向代码专家寻求一些帮助。谢谢!

Answer 1

WKWebView 阻止访问源页面所在目录之外的文件，即index.html 所在的www。当您将数据下载到 cordova.file.dataDirectory 时，文件路径位于不同的子树上，因此 WKWebView 无法访问这些文件。

一种解决方案，如概述here , 是使用 cordova-plugin-file 加载图像作为 blob，可以将其转换为 WKWebView 将接受的 URL:

function fetchLocalFileViaCordovaAsArrayBuffer(filename, successCallback, errorCallback)
{
    fetchLocalFileViaCordova(filename, function (file)
    {
        var reader = new FileReader();

        reader.onload = function (e)
        {
            successCallback(e.target.result);
        };

        reader.readAsArrayBuffer(file);
    }, errorCallback);
};

function fetchLocalFileViaCordovaAsURL(filename, successCallback, errorCallback)
{
    // Convert fake Cordova file to a real Blob object, which we can create a URL to.
    fetchLocalFileViaCordovaAsArrayBuffer(filename, function (arrayBuffer)
    {
        var blob = new Blob([arrayBuffer]);
        var url = URL.createObjectURL(blob);
        successCallback(url);
    }, errorCallback);
};

sharedSvc.getDetails($stateParams.id).then(function (data) {
    angular.forEach(imgData, function (value, key) {
        $cordovaFile.checkFile(cordova.file.dataDirectory+data.state+'/'+data.image_id+'/', value.image).then(function (success) {
            fetchLocalFileViaCordovaAsURL(cordova.file.dataDirectory+data.state+'/'+data.image_id+'/'+value.image, function(url){
                $scope.imgArr.push({src: url});
                console.log('PUSHING - '+imgSrc);
            });
        }, function(error) {
            console.log('Check for file bad1: '+cordova.file.dataDirectory+data.state+'/'+data.image_id+'/'+value.image);
            //console.log(JSON.stringify(error));
        });
    });
});