Ionic framework 如何在ionic3中设置配置文件图片功能

在我的项目中，我需要在

profile.html

页面中保存并向用户显示配置文件图片

还允许用户像whatsapp一样更改他们的个人资料图片

这里我分享我的代码

profile.html

使用PHP将图像上载到服务器

每当用户上传图像时，它都会成功上传到服务器

但是在上传了个人资料图片之后，当我转到下一页并返回到

profile.html

页面时，图像将不可见

我想在用户查看

profile.html

页面时显示个人资料图片

---

你知道吗？？？

把这段代码放到你的Html文件里

  <img src="{{ myphoto }}" (click)="getImage()" width="50%" height="50%" alt="Registration Image">

} //结束

---

这将从gallery设置您的图像。

因为您在上载时获取了文件目录URI。一旦您被选中，它就会从移动目录中出现，并且在页面上暂时可用。当你转到另一个页面后，它消失了。好吧，你可以检查图像标签的条件

例：

和

您可以在src标记中绑定更新的url以查看上载的配置文件，并执行两个条件以显示图像

类似url

我希望这会有帮助

   export class HomePage {

   lastImage: string = null;
   loading: Loading;

   constructor(public navCtrl: NavController, private camera: Camera, private 
   transfer: Transfer, private file: File, private filePath: FilePath, public 
   actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, 
   public platform: Platform, public loadingCtrl: LoadingController) { }

   public presentActionSheet() {
   let actionSheet = this.actionSheetCtrl.create({
   title: 'Select Image Source',
   buttons: [
    {
      text: 'Load from Library',
      handler: () => {
        this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
      }
    },
    {
      text: 'Use Camera',
      handler: () => {
        this.takePicture(this.camera.PictureSourceType.CAMERA);
      }
    },
    {
      text: 'Cancel',
      role: 'cancel'
    }
   ]
  });
   actionSheet.present();
  }
  }

   public takePicture(sourceType) {
  // Create options for the Camera Dialog
   var options = {
    quality: 100,
   sourceType: sourceType,
   saveToPhotoAlbum: false,
   correctOrientation: true
    };

   // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
   // Special handling for Android library
    if (this.platform.is('android') && sourceType === 
    this.camera.PictureSourceType.PHOTOLIBRARY) {
    this.filePath.resolveNativePath(imagePath)
    .then(filePath => {
      let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
      let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, 
       imagePath.lastIndexOf('?'));
      this.copyFileToLocalDir(correctPath, currentName, 
       this.createFileName());
     });
    } else {
    var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
    var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
    this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
     }
     }, (err) => {
    this.presentToast('Error while selecting image.');
     });
      }

     private createFileName() {
      var d = new Date(),
      n = d.getTime(),
      newFileName =  n + ".jpg";
       return newFileName;
       }

      // Copy the image to a local folder
      private copyFileToLocalDir(namePath, currentName, newFileName) {
      this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, 
      newFileName).then(success => {
       this.lastImage = newFileName;
       }, error => {
       this.presentToast('Error while storing file.');
      });
       }

      private presentToast(text) {
      let toast = this.toastCtrl.create({
       message: text,
       duration: 3000,
       position: 'top'
         });
       toast.present();
        }

      // Always get the accurate path to your apps folder
      public pathForImage(img) {
      if (img === null) {
        return '';
         } else {
       return cordova.file.dataDirectory + img;
          }
          }

        public uploadImage() {
       // Destination URL
        var url = "http://xxxx/img/upload.php";

        // File for Upload
         var targetPath = this.pathForImage(this.lastImage);

        // File name only
        var filename = this.lastImage;

         var options = {
         fileKey: "file",
         fileName: filename,
         chunkedMode: false,
         mimeType: "multipart/form-data",
         params : {'fileName': filename}
        };

          const fileTransfer: TransferObject = this.transfer.create();

           this.loading = this.loadingCtrl.create({
           content: 'Uploading...',
           });
           this.loading.present();

           // Use the FileTransfer to upload the image
         fileTransfer.upload(targetPath, url, options).then(data => {
         this.loading.dismissAll()
         this.presentToast('Image succesful uploaded.');
         }, err => {
         this.loading.dismissAll()
         this.presentToast('Error while uploading file.');
           });
           }

  <img src="{{ myphoto }}" (click)="getImage()" width="50%" height="50%" alt="Registration Image">

const options: CameraOptions = {
  quality: 70,
  destinationType: this.camera.DestinationType.DATA_URL,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  saveToPhotoAlbum:false
}
this.camera.getPicture(options).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64:
  this.myphoto = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
  // Handle error
});

<img src="{{pathForImage(lastImage)}}" style="width: 100%" 
    [hidden]="lastImage === null" class="imgcircle">
and

<img src="url" style="width: 100%" 
    class="imgcircle" *ngIf="lastImage==null">