How to fix Refused to load the image in cordova?

Questions
1

i make a cordova application to upload image from camera and gallery, and i want to upload that file to my server.

this is my javascript code

    document.addEventListener('deviceready', function(){
      pictureSource = navigator.camera.PictureSourceType;
      destinationType = navigator.camera.DestinationType;
    });

    function onPhotoFileSuccess(imageData) {
      alert("onPhotoFileSuccess was called. imageData: "+imageData);
      // Get image handle
      console.log(JSON.stringify(imageData));
      $('#imagePreview').css('background-image', 'url('+imageData +')');
      uploadimgdata=imageData;
    }
    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      alert("onPhotoURISuccess was called. imageuri: "+imageURI);
      if (imageURI.substring(0,21)=="content://com.android") {
        photo_split=imageURI.split("%3A");
        imageURI="content://media/external/images/media/"+photo_split[1];
      }

      $('#imagePreview').css('background-image', 'url('+imageURI +')');

    uploadimgdata=imageURI;
    }

    function capturePhotoWithFile() {
        navigator.camera.getPicture(onPhotoFileSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
    }


    function getPhoto(source) {
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    function onFail(message) {
     messageAlert(message);
    }

this is my view code

<div class="item-inner">
  <div class="item-title item-label">Upload File</div>
  <div class="item-input-wrap">
    <div class="avatar-upload sheet-open" data-sheet=".my-sheet-swipe-to-close-file">
      <div class="avatar-edit">
      </div>
      <div class="avatar-preview">
        <div id="imagePreview" style="background-image: url('./img/other/notfound.jpg');">
        </div>
      </div>
    </div>
  </div>
</div>


<div class="sheet-modal my-sheet-swipe-to-close-file" style="height:195px; --f7-sheet-bg-color: #fff;">
  <div class="sheet-modal-inner">
    <div class="page-content">
      <div class="block-title block-title-large text-align-center"><b>Choose File</b></div>
      <div class="block text-align-center">
        <div class="row">
          <div class="col-50">
            <a href="#" class="col sheet-close text-align-center" onclick="capturePhotoEdit();" style="display: grid;">
              <i class="fas fa-camera" style="display: block;position: relative;margin: 0px auto;font-size: 40px;padding: 20px;border-radius: 50%;box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.2);margin-bottom: 10px;"></i>Take a Picture
            </a>
          </div>
          <div class="col-50">
            <a href="#" class="col sheet-close text-align-center" onclick="getPhoto(navigator.camera.PictureSourceType.SAVEDPHOTOALBUM);" style="display: grid;">
              <i class="far fa-folder-open" style="display: block;position: relative;margin: 0px auto;font-size: 40px;padding: 20px;border-radius: 50%;box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.2);margin-bottom: 10px;"></i>Pilih Gambar
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

but from that code i get error like this

Refused to load the image ‘content://com.miui.gallery.open/raw/%2Fstorage%2Femulated%2F0%2FDCIM%2FCamera%2FIMG_20201106_132412.jpg’ because it violates the following Content Security Policy directive: “img-src ‘self’ blob: data:”.

Refused to load the image ‘content://com.miui.gallery.open/raw/%2Fstorage%2Femulated%2F0%2FDCIM%2FCamera%2FIMG_20201106_132412.jpg’ because it violates the following Content Security Policy directive: “default-src * ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ data: gap:”. Note that ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

please help me to fix this bug, thank you

2

Apparently you need to add content: protocol to your CSP meta tag in index.html file