Ionic 3 - ios - 在屏幕上显示所选图像 [英] Ionic 3 - ios - displaying selected image on screen
问题描述
我设置相机插件以从照片库中选择图像并使用以下代码将其上传到服务器：
I set up the camera plugin to select an image from the photo library and upload it to the server with the following code:
getImage() {
//By default the camera retrieves the image as a JPEG file.
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
targetWidth:1080,
targetHeight:1080,
correctOrientation: true,
mediaType: this.camera.MediaType.PICTURE,
encodingType: this.camera.EncodingType.JPEG
}
this.camera.getPicture(options).then((fileUri) => {
if (this.platform.is('ios')) {
return this.crop.crop(fileUri, {quality: 100});
} else if (this.platform.is('android')) {
// Modify fileUri format, may not always be necessary
fileUri = 'file://' + fileUri;
/* Using cordova-plugin-crop starts here */
return this.crop.crop(fileUri, { quality: 100 });
}
}, (err) => {
console.log(err);
}).then((path) => {
// path looks like 'file:///storage/emulated/0/Android/data/com.foo.bar/cache/1477008080626-cropped.jpg?1477008106566'
console.log('Cropped Image Path!: ' + path);
this.imagePath = path;
return path;
});
}
然后我在屏幕上显示我的图像预览，如下所示：
I then display my image preview on the screen like so:
<img [src]="imagePath" />
iOS和Android上的选择图像，裁剪和上传工作都很完美。但是，在iOS上，图像的显示不起作用。 （没有显示）
The selecting image, cropping and uploading work perfectly fine on both iOS and Android. However, on iOS the displaying of the image does not work. (Nothing shows up)
我的控制台日志显示以下内容：
My console log shows the following:
2017 -12-07 15：06：52.559614-0500 fd-app [2537：1186586] [MC] systemgroup.com.apple.configurationprofiles路径的系统组容器是/private/var/containers/Shared/SystemGroup/systemgroup.com。 apple.configurationprofiles
2017-12-07 15:06:52.560425-0500 fd-app [2537：1186586] [MC]从公共有效用户设置中读取。
2017-12-07 15:06:55.754175-0500 fd-app [2537：1186662] [发现]发现扩展时遇到的错误：错误Domain = PlugInKit Code = 13查询已取消UserInfo = {NSLocalizedDescription = query取消}
2017-12-07 15:07:04.589982-0500 fd-app [2537：1186586]裁剪图像路径！：file：/// var / mobile / Containers / Data / Application / 8B2CD0E8-F6AC- 4530-BF02-D2F7A188EAC2 / tmp / cdv_photo_004.jpg
2017-12-07 15:06:52.559614-0500 fd-app[2537:1186586] [MC] System group container for systemgroup.com.apple.configurationprofiles path is /private/var/containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles 2017-12-07 15:06:52.560425-0500 fd-app[2537:1186586] [MC] Reading from public effective user settings. 2017-12-07 15:06:55.754175-0500 fd-app[2537:1186662] [discovery] errors encountered while discovering extensions: Error Domain=PlugInKit Code=13 "query cancelled" UserInfo={NSLocalizedDescription=query cancelled} 2017-12-07 15:07:04.589982-0500 fd-app[2537:1186586] Cropped Image Path!: file:///var/mobile/Containers/Data/Application/8B2CD0E8-F6AC-4530-BF02-D2F7A188EAC2/tmp/cdv_photo_004.jpg
我尝试将Photo Library Usage属性添加到Info.plist文件中但是没有没有帮助。有什么建议可以尝试下一步吗？
I tried adding Photo Library Usage property to the Info.plist file but that didn't help. Any suggestions what to try next?
更新：不确定这是否与它有关但我使用的是Xcode 9.2 beta，因为我的iPhone是11.2
UPDATE: Not sure if this has anything to do with it but I am using Xcode 9.2 beta because my iPhone is on 11.2
此外，我正在谷歌搜索的一切都指向这是一个权限问题，但是，选择图像后，图像出现在裁剪器中......这让我感到惊讶怀疑这里有什么奇怪的事吗？裁剪器如何显示图像但不显示HTML页面？
Also, everything I'm googling is pointing to the fact that this is a permissions problem, however, after selecting the image, the image appears in the cropper... this makes me suspect something odd is going on here? How can the cropper show the image but not the HTML page?
推荐答案
如果您使用 WKWebview 这是IOS 11中的默认webview，根据官方博客文章，你需要在HTML中使用之前，重写 file：// url。
If you are using WKWebview which is the default webview in IOS 11 as per the official blog post, you need to rewrite the file:// url before using in your HTML.
如果您正在处理本地文件（文本文件，图像，视频），则需要确保文件路径前面没有file：//。
If you’re working with local files (text files, images, videos), you’ll need to make sure that the path of file does not have file:// in front of it.
import { normalizeURL } from 'ionic-angular';
在您的函数中，
this.imagePath = normalizeURL(path);
return path;
进一步检查故障排除部分也是如此。
这篇关于Ionic 3 - ios - 在屏幕上显示所选图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
