ionic3 <img/>标签src

时间:2018-01-25 07:22:21

标签: html angularjs image ionic3

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

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中添加图片网址,我该如何解决?

1 个答案:

答案 0 :(得分:0)

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

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