Question

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

当我运行ionic serve时，图像将下载并缓存并正确加载，但是当我在iOS设备上安装应用程序时，图像无法加载，当我在Safari浏览器中检查时，我＆＃ 39;我看到这些错误：

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缓存的图像加载的工作。

将此行添加到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/或其他任何内容

Ionic 3 - ImgCache.js无法加载资源：iOS中的不支持URL

1 个答案: