我正在开发ionic 3应用程序,我想用相机捕获多张(3)图像,在相机图标下方显示图像的预览,并上传图像以及剩余信息。
我无法显示捕获的图像的预览。
let options: CaptureImageOptions = { limit: 3 };
this.mediaCapture.captureImage(options)
.then(data: MediaFile[]) => {
this.images = data;
},
(err: CaptureError) => console.error(err)
);
HTML代码-
<div *ngFor="let image of images">
<img src="{{image.fullPath}}" />
</div>
当我将图像的完整路径绑定到img src时,当我打印给出以下图像路径的完整路径时,它什么也没显示。
file:///storage/emulated/0/Pictures/1534070545509.jpg
请让我摆脱这个问题。
答案 0 :(得分:1)
请尝试以下操作: 1.在TS文件中:
async captureImage(useAlbum: boolean) {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
...useAlbum ? {sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM} : {}
}
const imageData = await this.camera.getPicture(options);
this.base64Image = `data:image/jpeg;base64,${imageData}`;
}
img src =“ {{base64Image}}”“ alt =”“ class =” image_container
答案 1 :(得分:0)
尝试一下,
<div *ngFor="let image of images">
<img src="'data:image/jpeg;base64,' +{{image.fullPath}}" />
</div>