cordova - Ionic 3 - ImgCache.js 无法加载资源 : unsupport URL in iOS

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

以下是我在 WKWebView 下修复使用 ImgCache.js 缓存的图像加载所做的操作。

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

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

使用下面的代码规范化从 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/';
    }

之后在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://、file://、http://localhost:8080/ 开头。 ，也没有其他任何东西