Image is not loading properly from image picker in ionic 4

Ionic Framework ionic-v3
1

I am selecting image using image picker .Its not loading on selecting .

image
image.jpg720×1280 76.4 KB

image
image.jpg720×1280 72.4 KB

The image was selected , but its not showing in screen.

image
image.jpg720×1280 76.4 KB

Now i am clicking somewhere (on the red dot) . Now its loading.

image
image.jpg720×1280 92.1 KB

here is my code

home.html

    <div>
         <img *ngIf="imageUrl" src="{{imageUrl}}" class="boxmodelImage" />
    </div>

home.ts

async attachment() {

const actionSheet = await this.actionSheetController.create({
header: ‘Attachment’,
cssClass: ‘myPage’,
buttons: [
{
icon: ‘camera’,
text: ‘Open Camera’,
cssClass: ‘myActionSheetBtnStyle’,
handler: () => {
this.CameraImageUpload();
}
},
{
icon: ‘photos’,
text: ‘Open Gallery’,
handler: () => {
this.GalleryImageUpload();
}

}]
});
await actionSheet.present();
// return this.base64Image;
}

async GalleryImageUpload() {
await this.imagePicker.getPictures({ maximumImagesCount: 1, outputType: 0 }).then((results) => {
for (const item of results) {
console.log(‘Image URI: ’ + item);
this.crop.crop(item, { quality: 100 })
.then(
newImage => {
console.log(‘new image path is: ’ + newImage);
const fileTransfer: FileTransferObject = this.transfer.create();
const uploadOpts: FileUploadOptions = {
fileKey: ‘file’,
fileName: newImage.substr(newImage.lastIndexOf(’/’) + 1)
};

          fileTransfer.upload(newImage, 'http://192.168.1.1:3000/post/uploadImage', uploadOpts)
           .then((data) => {
             console.log(data);
             this.respData = JSON.parse(data.response);
             console.log(this.respData);
             this.imageUrl = this.respData.fileUrl;
           }, (err) => {
             console.log(err);
           });
        },
        error => console.error('Error cropping image', error)
      );
}

}, (err) => { console.log(err); });
}

async CameraImageUpload() {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
saveToPhotoAlbum: true,
sourceType: 1
};
await this.camera.getPicture(options).then((imageData) => {
for (const item of imageData) {
console.log(‘Image URI: ’ + item);
this.crop.crop(item, { quality: 100 })
.then(
newImage => {
console.log(‘new image path is: ’ + newImage);
const fileTransfer: FileTransferObject = this.transfer.create();
const uploadOpts: FileUploadOptions = {
fileKey: ‘file’,
fileName: newImage.substr(newImage.lastIndexOf(’/’) + 1)
};

              fileTransfer.upload(newImage, 'http://192.168.1.1:3000/post/uploadImage', uploadOpts)
              .then((data) => {
                console.log(data);
                this.respData = JSON.parse(data.response);
                console.log(this.respData);
                this.imageUrl = this.respData.fileUrl;
              }, (err) => {
                console.log(err);
              });
            },
            error => console.error('Error cropping image', error)
          );
    }
  }, (err) => { console.log(err); });

}