使用 cordova-plugin-ionic-webview 版本冲突？

Question

我正在开发 ionic3 应用程序。我需要通过相机或图库从用户那里获取图像，首先将其保存到本地目录，然后将图像上传到服务器。我使用了以下分步教程：https://devdactic.com/ionic-2-images/ 上传照片就像一个魅力，但在将图像保存到本地目录并将路径保存在本地存储上时，从存储中检索后显示以下错误： .
很明显，它抱怨 不允许加载本地资源。接下来，我开始google寻找解决方案，我发现this solution in Whosebug and this in GitHub. As they both suggested, the problem is with cordova-plugin-ionic-webview, so I need to downgrade the version. When I tried their solution, the uploading and showing the image to the user is working perfectly, however, it creates problem other parts of the application which is loading data from asset no matter what; images, fonts. Shows the following error .Next I found a solutionf for the problem in GitHub here，因为它建议并被大多数用户接受我们需要使用最新版本的**cordova-plugin-ionic-webview ** ，这当然会给我带来第一个问题。我也要在这里上传代码。`

getImage() {
    this.presentActionSheet();
  } //end getImage
  public uploadImage() {
    console.log('Uploading the image');
    console.log(this.lastImageL);
    var targetPath = this.pathForImage(this.lastImage);

    console.log(targetPath);

    var url = "https://dev.raihan.pomdev.net/wp-json/raihan/v1/profilePhoto";


    var filename = this.lastImage;
    console.log(' targetPath  :   ', targetPath);
    console.log('File Name : ', filename)
    console.log(url, " IS the URL");
    var options = {
      fileKey: "image",
      fileName: filename,
      chunkedMode: false,
      mimeType: "multipart/form-data",
      params: {
        'image': filename,
        'user_id': 79
      }
    };

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

    this.loading = this.loadingCtrl.create({
      content: 'منتظر باشید',
    });
    this.loading.present();

    // Use the FileTransfer to upload the image
    fileTransfer.upload(targetPath, url, options).then(data => {
      this.loading.dismissAll()

      this.presentToast(' . عکس شما موفقانه ذخیره شد');

      this.storage.set("Profile_Photo", targetPath).then((data) => {
        console.log('response of uploading the image ', data);
        console.log('Target Path ', targetPath);
        console.log('In set storage ', targetPath);
        $("#Photo").attr("src", targetPath);
        $("#Photo2").attr("src", targetPath);
        console.log('myphoto ', targetPath);
      });
    }, err => {
      this.loading.dismissAll()
      this.presentToast('مشکلی در قسمت ذخیره کردن عکس شما وجود دارد  ' + err);
      console.log('error sending the image');
      console.log(err);
    });
  }
  public takePicture(sourceType) {

    var options = {
      quality: 100,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {

      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.');
    });
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad CaptureImagePage');
  }
  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;
      this.uploadImage();
    }, error => {
      this.presentToast('Error while storing file. ' + error);
    });
  }

  private presentToast(text) {
    let toast = this.toastCtrl.create({
      message: text,
      duration: 5000,
      position: 'center'
    });
    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 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();
  }

` 现在我很困惑我应该使用哪个版本的 **cordova-plugin-ionic-webview **？有没有人可以帮助我？

注：感谢您耐心阅读所有问题。

Answer 1

如果可能我会尝试使用最新版本的WebView，然后在file:///路径上使用window.Ionic.WebView.convertFileSrc()方法，然后将其放在页面上显示。这些提示可以在这里看到：

https://ionicframework.com/docs/building/webview

Cordova and Capacitor apps are hosted on a local HTTP server and are served with the http:// protocol. Some plugins, however, attempt to access device files via the file:// protocol. To avoid difficulties between http:// and file://, paths to device files must be rewritten to use the local HTTP server. For example, file:///path/to/device/file must be rewritten as http://://path/to/device/file before being rendered in the app.

For Cordova apps, the Ionic Web View plugin provides a utility function for converting File URIs: window.Ionic.WebView.convertFileSrc(). There is also a corresponding Ionic Native plugin: @ionic-native/ionic-webview.

这是我使用的示例方法，它在 4.x 网络视图中运行良好：

  getNormalizedUrl(path: string): SafeResourceUrl {
      let newPath = this.domSanitizer.bypassSecurityTrustUrl(
          window.Ionic.WebView.convertFileSrc(path));
      return newPath;
  }

使用 cordova-plugin-ionic-webview 版本冲突？

Conflict on using cordova-plugin-ionic-webview version?

android

cordova

ionic-framework

ionic3

angular