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

我的设置：

本地套餐： Cordova平台：android 6.1.2 ios 4.4.0 离子骨架：ionic1.3.2 Cordova CLI 7.0.1和今天最新的ionic

我有一个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调用所示。当我手动导航到这些图像时，它们就在那里并且大小正确。此外，控制台日志显示了文件的正确路径。但是，当应用程序在模拟器（以及我的物理设备）中运行时，图像是空白的

---

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

WKWebView阻止访问源页面所在目录之外的文件，即

www

所在的

index.html

目录。 将数据下载到

cordova.file.dataDirectory

时，文件路径位于不同的子树上，因此WKWebView无法访问这些文件

如上所述，一种解决方案是使用

cordova plugin file

作为blob加载图像，该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));
        });
    });
});

---

WKWebView阻止访问源页面所在目录之外的文件，即

www

所在的

index.html

目录。 将数据下载到

cordova.file.dataDirectory

时，文件路径位于不同的子树上，因此WKWebView无法访问这些文件

如上所述，一种解决方案是使用

cordova plugin file

作为blob加载图像，该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));
        });
    });
});

---

我使用您提到的文章（fetchLocalFileViaCordova）添加了一个缺少的函数调用，它工作得很好。非常感谢！我使用您提到的文章（fetchLocalFileViaCordova）添加了一个缺少的函数调用，它工作得很好。非常感谢！