我正在尝试从用户手机加载图像,裁剪它然后显示。我正在使用 webview 插件来做到这一点。它在 Android 上按预期工作,但在 IOS 上不工作。
我已经从另一个问题中尝试过这个问题,它解决了找不到文件的错误
itemSrc = itemSrc.replace(/^file:\/\//, '');
我也查看了 NormalizeURL,但它似乎不适用于 Ionic 4
这是一些代码
this.imagePicker.getPictures(options)
.then((results: string[]) => {
results.forEach(res => {
this.crop.crop(res, {quality: 50})
.then(
data =>{
//this is extracting the URL
this.user.photos.push(this.webview.convertFileSrc(data));
},
之后,UI 应该显示裁剪后的图像,它在 Android 上会显示,但在 IOS 上不会显示。
我使用 safari 开发工具进行检查,这是错误:
[Error] Failed to load resource: unsupported URL (unsafe:ionic://localhost/_app_file_/Users/radmac/Library/Developer/CoreSimulator/Devices/8E6A6BFA-66FA-4DB3-B556-BCE9E2EFE33A/data/Containers/Data/Application/C39D8D99-0F67-4D33-9195-EE2B4D4E4707/tmp/cdv_photo_024.jpg, line 0)
最佳答案
所以,我找到了解决方案。在此之前,您可以阅读这篇博客文章,如果您想了解更多关于 ionic native 和图像的信息,这真的很有帮助。 https://ionicframework.com/blog/storing-photos-with-the-cordova-camera-and-file-plugins/
解决方案是用 dom sanitizer 包裹 webview 转换后的 src,就像这样,
const resolvedImg = this.webview.convertFileSrc(data);
this.user.photos.push(<string>this.sanitizer.bypassSecurityTrustUrl(resolvedImg));
确保导入 dom 清理器。
import {DomSanitizer} from "@angular/platform-browser";
...
constructor(private sanitizer: DomSanitizer){
...
}
关于android - Ionic 4 加载本地资源不适用于 IOS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58419739/