离子3- ImgCache.js未能加载资源:不支持iOS中的URL

Question

我已经设法让imagecache.js在我的Ionic 3项目中工作，基于这个链接中的教程：https://medium.com/ninjadevs/caching-images-ionic-ccf2f4ca8d1f。

当我运行ionic serve时，图像将正确地下载、缓存和加载，但是当我在我的iOS设备上安装应用程序时，这些映像无法加载，当我在我的Safari浏览器中检查它时，我看到以下错误：

Failed to load resource: unsupported URL

cdvfile://localhost/persistent/imgcache/a001f5f745d1d28d42b3395dd83d408a26aa9e6b.jpg

在我的config.xml文件中，我有以下条目，我认为这些条目可以解决问题，但没有：

<access origin="*" />
<access origin="cdvfile://*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-navigation href="*" />

还有其他人遇到过类似的问题吗？

Answer 1

下面是我为修复ImgCache.js在WKWebView下缓存的图像的加载所做的事情。

1. 将这一行添加到config.xml中：

    <platform name="ios">
        <!-- Line here under iOS settings -->
        <preference name="iosPersistentFileLocation" value="Library" />

1. 使用下一段代码来规范从ImgCache.js加载的URL：

    private normalizeUrl(url: string) {
        let result = url;

        const cdvfilePrefix = 'cdvfile://localhost/persistent/imgcache/';
        if (ionic.Platform.isIOS() && url.indexOf(cdvfilePrefix) === 0 ) {
            result = this.getIosImgCacheDirectoryUrl() + url.split(cdvfilePrefix)[1]
        }

        if (ionic.Platform.isIOS()) {
            result = result.replace(/^file:\/\//g, '');
        }

        return result;
    }

    private getIosImgCacheDirectoryUrl(): string {
        return cordova.file.dataDirectory.split('Library')[0] + 'Library/files/imgcache/';
    }

1. 之后，在cachedUrl上使用它

      ImgCache.getCachedFileURL(src,
            (originalUrl, cacheUrl) => {
              const localUrl = this.normalizeUrl(cacheUrl);
              // now you can use it for <img src="{{localUrl}}>
            });

在iOS上得到的URL将类似于：

/var/mobile/Containers/Data/Application/<UUID>/Library/files/imgcache/<UNIQUE_FILE_ID>

注意，它必须以/ file://，开头，而不是以cdv file://，、file://，、http://localhost:8080/或其他任何东西开头。