# Image preview not available using fileuri

**URL:** <https://forum.ionicframework.com/t/image-preview-not-available-using-fileuri/138123>\
**Category:** ionic-v3\
**Created:** [August 12, 2018, 7:33am UTC](https://forum.ionicframework.com/t/image-preview-not-available-using-fileuri/138123 "2018-08-12T07:33:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![chakradharsw](https://avatars.discourse-cdn.com/v4/letter/c/779978/32.png) [@chakradharsw](https://forum.ionicframework.com/u/chakradharsw)\
**Post date:** [August 12, 2018, 7:33am UTC](https://forum.ionicframework.com/t/image-preview-not-available-using-fileuri/138123/1 "2018-08-12T07:33:15Z")

</div>

Hi,  
I want to preview the image which is captured . I am not able to get the preview of the image bay using fileuri, any suggestion… Below my code

```auto
 capturePicture(){
    const option: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
    }
    this.camera.getPicture(option).then((imageData) => {
      this.capturedUrl = imageData;
            }, (err) => {
      // Handle error
     });
  }

```

```auto
<button ion-button block (click)="capturePicture()" >
          <ion-icon name="camera"></ion-icon>
          Camera
        </button>
<img [src] = "capturedUrl" />

```

---

<div class="post-metadata">

**Author:** ![chakradharsw](https://avatars.discourse-cdn.com/v4/letter/c/779978/32.png) [@chakradharsw](https://forum.ionicframework.com/u/chakradharsw)\
**Post date:** [August 16, 2018, 4:10am UTC](https://forum.ionicframework.com/t/image-preview-not-available-using-fileuri/138123/2 "2018-08-16T04:10:43Z")

</div>

i solved this issue by doing as below . i think it will help someone.

```auto
this.file.resolveLocalFilesystemUrl(imageData).then((entry:any)=>{
    entry.file((file1)=>{
    var reader = new FileReader();
    reader.onload = (encodedFile: any)=>{
      var src = encodedFile.target.result;
      this.image = src;       
      }
    reader.readAsDataURL(file1);   
  })
}).catch((error)=>{
  console.log(error);
})

```

---

<div class="post-metadata">

**Author:** ![vivekphull](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vivekphull](https://forum.ionicframework.com/u/vivekphull)\
**Post date:** [September 6, 2018, 5:26am UTC](https://forum.ionicframework.com/t/image-preview-not-available-using-fileuri/138123/3 "2018-09-06T05:26:34Z")

</div>

Hi, Looks like you have solved the issue, can you please explain how are you using the code for the solution? thanks.

---

<div class="post-metadata">

**Author:** ![chakradharsw](https://avatars.discourse-cdn.com/v4/letter/c/779978/32.png) [@chakradharsw](https://forum.ionicframework.com/u/chakradharsw)\
**Post date:** [September 6, 2018, 1:44pm UTC](https://forum.ionicframework.com/t/image-preview-not-available-using-fileuri/138123/4 "2018-09-06T13:44:40Z")

</div>

i just converted the fileuri image to datauri and displayed the image

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:25pm UTC](https://forum.ionicframework.com/t/image-preview-not-available-using-fileuri/138123/5 "2021-07-19T21:25:42Z")

</div>