I am selecting image using image picker .Its not loading on selecting .
The image was selected , but its not showing in screen.
Now i am clicking somewhere (on the red dot) . Now its loading.
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); });
}