Javascript Ionic 3未在图像src中显示相机文件\u URI路径
这是我的HTML代码Javascript Ionic 3未在图像src中显示相机文件\u URI路径,javascript,angular,ionic3,angular5,Javascript,Angular,Ionic3,Angular5,这是我的HTML代码 <img [src]="profileImage"/> <button (click)="openCamera()"> Upload </button> 当我从相机中捕获图像时,它将返回文件URI,如下file:///storage/emulated/0/Android/data/com.exchangeconnect.sancial/cache/1536751062113-cropped.jpg?1536751088363 但图像未显
<img [src]="profileImage"/>
<button (click)="openCamera()"> Upload </button>
我已经修改了你的代码。请在下面查找更新的代码:
import { ViewController, Platform, normalizeURL } from 'ionic-angular';
openCamera() {
let options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: false,
targetWidth: 400,
targetHeight: 400,
allowEdit: false
}
this.camera.getPicture(options).then((imageData) => {
this.cropService.crop(imageData, { quality: 100 }).then((newImage) => {
if (this.platform.is('ios')){
this.profileImage = normalizeURL(newImage);
}else{
this.profileImage= "data:image/jpeg;base64," + newImage;
}
}, (error) => {
console.log("Error cropping image", error);
});
}, (err) => {
console.log('Error camera image', err);
});
}
或如果上述解决方案不起作用,请尝试以下代码:
import { ViewController, Platform, normalizeURL } from 'ionic-angular';
openCamera() {
let options = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum: false,
targetWidth: 400,
targetHeight: 400,
allowEdit: false
}
this.camera.getPicture(options).then((imageData) => {
// don't need to crop image for iOS platform as it is a in-build feature
if (this.platform.is('ios')) {
this.getFileUri(imageData);
}else { // android platform, we need to do manually
this.cropService.crop(imageData, { quality: 100 }).then(newImage => {
this.getFileUri(newImage);
},
error => console.error('Error cropping image', error)
);
}
}, (err) => {
console.log('Error camera image', err);
});
}
private getFileUri = (url: any) => {
var scope = this;
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
scope.profileImage = reader.result;
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
我认为它与“cordova插件ionic webview”插件有关。请参考以下步骤以解决此问题:1] 卸载现有的webview插件
ionic cordova plugin rm cordova-plugin-ionic-webview
2] 安装旧版本ionic cordova plugin add cordova-plugin-ionic-webview@1.2.1
3] 清洁科尔多瓦机器人
ionic cordova clean android
请在此处查找更多详细信息尝试保留原始代码并进行更改
saveToPhotoAlbum: false
到
你能检查一下吗,
从'@angular/platform browser'导入{domsanizer}
。尝试
您使用的是哪个平台?@Madhavan.V我已经尝试过了,但没有成功。@SandipLipane我使用的是android平台。@BhavinShiroya,请尝试下面给出的solution@BhavinShiroya,我已经更新了答案,请检查相同的答案。我得到了两个这样的错误“无法加载XMLHttpRequestfile:///storage/emulated/0/Android/data/com.exchangeconnect.sancial/cache/1537447078582-cropped.jpg?1537447081663. 跨源请求仅支持协议方案:http、data、chrome、https。”第二个请求“不允许加载本地资源:file:///storage/emulated/0/Android/data/com.exchangeconnect.sancial/cache/1537447078582-cropped.jpg?1537447081663我认为这与“cordova插件”和“网络视图”有关“插件。顺便问一下,我可以知道你的爱奥尼亚版本吗?我正在使用“爱奥尼亚角度”:“3.9.2”和“cordova插件爱奥尼亚网络视图”:“^2.1.4”
saveToPhotoAlbum: false
saveToPhotoAlbum: true