来自图库的图像未显示在离子2中的img标签上 [英] Image from gallery not displaying on img tag in ionic 2
问题描述
我正在尝试将图库中的图像显示为 img
标记。但图像未显示在 img
标记上。但它正在使用 PhotoViewer
。以下是我的代码。
I am trying to display image from gallery to img
tag. But image not showing on img
tag. But it is working with PhotoViewer
. below is my code.
options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
//mediaType: this.camera.MediaType.PICTURE
}
用
this.camera.getPicture(this.options).then((imageData) => {
alert(imageData)
this.photoViewer.show(imageData);
this.captureDataUrl=imageData;
}, (err) => {
// Handle error
});
HTML中的
in HTML
<img [src]="captureDataUrl" *ngIf="captureDataUrl"/>
如果我使用sourceType作为相机( sourceType:this.camera.PictureSourceType .CAMERA
),它也有效,它在img标签上显示图像,但如果我使用sourceType为 sourceType:this.camera.PictureSourceType.PHOTOLIBRARY
。请帮助
If I am using sourceType as camera (sourceType: this.camera.PictureSourceType.CAMERA
),it also working,it displays image on img tag, But not working on if i use sourceType as sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
. Please help
推荐答案
您好在ios中遇到同样的问题,
我通过执行以下步骤来解决此问题
Hi have the same problem in ios, I resolve this problem by doing the following step
var options = {
quality: 80,
allowEdit: true,
sourceType: this.camera.PictureSourceType.CAMERA,
saveToPhotoAlbum: false,
correctOrientation: true,
encodingType: this.camera.EncodingType.JPEG,
destinationType: this.camera.DestinationType.FILE_URI
//encodingType: this.camera.EncodingType.PNG,
};
this.camera.getPicture(options).then((imagePath) => {
// Special handling for Android library //
if (this.platform.is('ios')) {
this.ImageData = imagePath.replace(/^file:\/\//, '');
}
else {
this.ImageData = imagePath;
}
this.photos.push(this.ImageData); //if you have to show multiple image
this.photos.reverse();
}
Html部分
<ion-row>
<ion-col col-3 *ngFor="let photo of photos; let id = index">
<ion-card class="block">
<ion-icon name="ios-close-circle-outline" class="deleteIcon" (click)="deletePhoto(id)"></ion-icon>
<img [src]="photo" *ngIf="photo" />
</ion-card>
</ion-col>
</ion-row>
这篇关于来自图库的图像未显示在离子2中的img标签上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!