离子3< img>标签src [英] ionic3 <img> tag src

问题描述

我想拍照并在iphone中显示，我用
< img [src] =imagePath/>
在home.html和home.ts中，添加cordova-plugin-camera拍照，
如下：

I want take a picture and show it in iphone，I used <img [src]="imagePath"/> in home.html，and in home.ts, add cordova-plugin-camera to take a picture， as following：

const options: CameraOptions = {
 quality: 100,
 destinationType: this.camera.DestinationType.FILE_URI,   //DATA_URL
 encodingType: this.camera.EncodingType.JPEG,
 mediaType: this.camera.MediaType.PICTURE,
 saveToPhotoAlbum: true,                                       
}

this.camera.getPicture(options).then((imageUri) => { //imageData, if DATA_URL

 //if DATA_URL
//let base64Image = 'data:image/jpeg;base64,' + imageData;
//this.imagePath = base64Image;       //the image can be show in screen


//if FILE_URI
this.imagePath = imageUri;});//cannot show image
},(err) => {// Handle error
});

我想在SQLite中添加图片网址，我该如何解决？

I want to add image url in SQLite, so how can I fix it？

推荐答案

从'ionic-angular'导入{normalizeURL};

import { normalizeURL } from 'ionic-angular';

<img *ngIf="base64Image" src="{{base64Image}}"/> 
   openCamera(pictureSourceType: any) {
let options: CameraOptions = {
  quality: 95,
  destinationType: this.camera.DestinationType.FILE_URI,
  sourceType: pictureSourceType,
  encodingType: this.camera.EncodingType.PNG,
  targetWidth: 400,
  targetHeight: 400,
  saveToPhotoAlbum: true,
  correctOrientation: true
};
this.camera.getPicture(options).then(imageData => {
    if (this.platform.is('ios'))
    this.base64Image = normalizeURL(imageData);
     // IF problem only occur in ios and normalizeURL 
     //not work for you then you can also use 
     //this.base64Image= imageData.replace(/^file:\/\//, '');
  else
    this.base64Image= "data:image/jpeg;base64," + imageData;
}, error => {
  console.log('ERROR -> ' + JSON.stringify(error));
});
}

这篇关于离子3< img>标签src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！