Ionic 3 – ios – visualización de la imagen seleccionada en la pantalla

Configuré el complemento de la cámara para seleccionar una imagen de la biblioteca de fotos y subirla al servidor con el siguiente código:

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; }); } 

Luego, visualizo la vista previa de mi imagen en la pantalla de esta manera:

  

La selección de imagen, recorte y carga funcionan perfectamente tanto en iOS como en Android. Sin embargo, en iOS, la visualización de la imagen no funciona. (No aparece nada)

Mi registro de consola muestra lo siguiente:

2017-12-07 15: 06: 52.559614-0500 fd-app [2537: 1186586] [MC] Contenedor del grupo del sistema para systemgroup.com.apple.configurationprofiles ruta es /private/var/containers/Shared/SystemGroup/systemgroup.com .apple.configurationprofiles 2017-12-07 15: 06: 52.560425-0500 fd-app [2537: 1186586] [MC] Lectura de la configuración del usuario público efectivo. 2017-12-07 15: 06: 55.754175-0500 fd-app [2537: 1186662] [descubrimiento] se encontraron errores al descubrir extensiones: Dominio de error = Código PlugInKit = 13 “consulta cancelada” UserInfo = {NSLocalizedDescription = consulta cancelada} 2017- 12-07 15: 07: 04.589982-0500 fd-app [2537: 1186586] Ruta de la imagen recortada !: file: /// var / mobile / Containers / Data / Application / 8B2CD0E8-F6AC-4530-BF02-D2F7A188EAC2 / tmp / cdv_photo_004.jpg

Traté de agregar la propiedad de Uso de la Biblioteca de Fotos al archivo Info.plist, pero eso no ayudó. ¿Alguna sugerencia qué probar después?

ACTUALIZACIÓN: No estoy seguro si esto tiene algo que ver con eso, pero estoy usando Xcode 9.2 beta porque mi iPhone está en 11.2

Además, todo lo que busco en Google apunta al hecho de que este es un problema de permisos, sin embargo, después de seleccionar la imagen, la imagen aparece en el recortador … ¿esto me hace sospechar que algo extraño está sucediendo aquí? ¿Cómo puede el cultivador mostrar la imagen pero no la página HTML?

Si está utilizando WKWebview, que es la vista web predeterminada en IOS 11 según la publicación oficial del blog , necesita volver a escribir el file:// url antes de usarlo en su HTML.

Si está trabajando con archivos locales (archivos de texto, imágenes, videos), deberá asegurarse de que la ruta del archivo no tenga el archivo: // frente a ella.

 import { normalizeURL } from 'ionic-angular'; 

Y en tu función,

  this.imagePath = normalizeURL(path); return path; 

Verifique más la sección de solución de problemas que dice lo mismo.

También puede intentar usar ‘DomSanitizer’ (Por alguna razón, la imagen está bloqueada):

ts

 import { DomSanitizer } from '@angular/platform-browser'; constructor( public _DomSanitizer: DomSanitizer, private cameraCtrl: Camera, ... } this.cameraCtrl.getPicture(this.options).then((imageData) => { this.photoSrc = 'data:image/jpg;base64,' + imageData; this.cameraPhoto = this._DomSanitizer.bypassSecurityTrustUrl(this.photoSrc) ...}) 

html