Question

我的设置：

本地包裹： Cordova平台：android 6.1.2 ios 4.4.0 离子骨架：ionic1 1.3.2 Cordova CLI 7.0.1和今天的最新离子

我有一个Ionic 1应用程序可以下载一组图像并通过Cordova文件插件存储它们：cordova.file.dataDirectory。然后我试图展示那些图像，但遇到了一些麻烦。我在WKWebView中使用MacBook Pro，Xcode 8和iOS 10（性能），虽然我切换到了一个具有相同结果的UIWebView。

<tr>
  <td>xxx</td>
  <td>xxx</td>
  <td>$xxx</td>
  <td>xxx</td>
  <td><a href="cart.html">Buy</a></td> // Add the TD here
</tr>

然后我试图显示图像：

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));
        });
    });
});

作为参考，我的config.xml文件中有以下项目：

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

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

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

在搜索了一整天的解决方案后，我要求代码专家提供一些帮助。谢谢！

Answer 1

WKWebView阻止访问源页面所在目录之外的文件，即www所在的index.html。当您将数据下载到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));
        });
    });
});

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

1 个答案: