离子3 -imgcache.js无法加载资源:在iOS中取消支持的URL

Question

我已经设法获得了ImageCache.js在我的Ionic 3项目中工作，基于此链接中的教程：https：//medium.com/ninjadevs/caching-images-images-ionic-ionic-ionic-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

这是我为修复wkwebview下的imgcache.js的图像加载所做的。

1. 将此行添加到config.xml：

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

2. 使用下一个代码将来自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/';
    }

3. 之后，在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>

请注意，必须以/的范围开始，而不是以cdvfile：//，none file：//，nor http：//http：//http：//http：8080/，也不是其他任何东西