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

【问题标题】：Ionic 3 - ImgCache.js failed to load resource: unsupport URL in iOSIonic 3 - ImgCache.js 无法加载资源：iOS 中不支持 URL
【发布时间】：2017-06-07 15:47:10
【问题描述】：

根据以下链接中的教程，我已经设法让 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="*" />

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

【问题讨论】：

与问题不完全相关，但您可以使用this module 在您的应用中捕捉图像。我正在使用它，并且在 android 和 ios 上都运行良好。
这太棒了，我一直在尝试！虽然当我启用调试模式并通过 safari 检查器检查在我的 iOS 设备上运行的应用程序时，我收到代码为 3 的文件传输错误。图像仍在加载，但我不确定它是否从缓存或者它只是每次都重新下载它们
尝试设置缓存图像的返回类型：this.imageLoaderConfig.setImageReturnType('base64');。那应该可以解决问题。另一种测试插件是否正常工作的方法是添加一些超重的图像，看看它们是否几乎是瞬间加载的。
我遇到了同样的问题。你有什么发现吗？

标签： cordova ionic-framework ionic3

【解决方案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/ 或其他任何内容开头

【讨论】：

有没有人有针对此问题的非离子纯 Cordova basedq 解决方案？
@user2841639 如您所见，我刚刚调试了代码，找到了它生成的 url 并将其替换为应有的 URL。您可以尝试与我相同的方法，而是在 normalizeUrl 方法中执行您的特定情况所需的操作。否则它应该非常相似，无论它是 Cordova 还是 Ionic。你应该得到与我最后为 iOS 提供的相同的结果 URL
@afrish 的解决方案有效，只需要在imgcache.js 返回的img url 上应用src = src.replace(/^file:\/\//g, '');。另一种解决方案是使用 window.URL.createObjectURL 来获取 Blob 图像的 DOM 字符串，很好解释 here