# Unable to display image using FILE\_URI **URL:** \ **Category:** ionic-v3\ **Created:** [April 1, 2017, 5:29am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977 "2017-04-01T05:29:01Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![AdminJay](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@AdminJay](https://forum.ionicframework.com/u/AdminJay)\ **Post date:** [September 19, 2018, 10:13am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/22 "2018-09-19T10:13:24Z")
You saved my day. Thank you 🙂 ---
**Author:** ![nphoanh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nphoanh/32/121260_2.png) [@nphoanh](https://forum.ionicframework.com/u/nphoanh)\ **Post date:** [September 19, 2018, 1:18pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/23 "2018-09-19T13:18:41Z")
This works for me, thank you so much 😘 ---
**Author:** ![ringuta](https://avatars.discourse-cdn.com/v4/letter/r/258eb7/32.png) [@ringuta](https://forum.ionicframework.com/u/ringuta)\ **Post date:** [October 2, 2018, 1:44am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/24 "2018-10-02T01:44:58Z")
The instruction are here > **[ionic-team/cordova-plugin-ionic-webview](https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions)** > > Contribute to ionic-team/cordova-plugin-ionic-webview development by creating an account on GitHub. All you have to do is sanitize the path as _this.image = window.Ionic.WebView.convertFileSrc(imageData);_ and it works like charm!! ---
**Author:** ![ljwiie](https://avatars.discourse-cdn.com/v4/letter/l/dc4da7/32.png) [@ljwiie](https://forum.ionicframework.com/u/ljwiie)\ **Post date:** [October 23, 2018, 2:04am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/25 "2018-10-23T02:04:42Z")
In ionic v3，just like yours: this.image = (\window).Ionic.WebView.convertFileSrc(imageData); ---
**Author:** ![yulianross](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/yulianross/32/122691_2.png) [@yulianross](https://forum.ionicframework.com/u/yulianross)\ **Post date:** [November 13, 2018, 12:59pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/26 "2018-11-13T12:59:12Z")
thanks, it works for me too ---
**Author:** ![jbhughes](https://avatars.discourse-cdn.com/v4/letter/j/73ab20/32.png) [@jbhughes](https://forum.ionicframework.com/u/jbhughes)\ **Post date:** [November 27, 2018, 4:41pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/27 "2018-11-27T16:41:28Z")
If I use ReadAsDataUrl, it works but it is very slow on Android to create the bae64 image. It takes 4 to 5 seconds for a medium resolution photo. The WebView solution is only in beta(?) so I am hesitant to use beta code. What is so strange to me, is that the code below worked in an app I wrote in the spring of 2018. And it still works. takePicture(opts: CameraOptions) { this.camera.getPicture(opts).then((imageData) =\> { this.myImage = imageData; }, (err) =\> { console.log(err); }); } I did notice the old native wrapper for @ionic-native/camera was 4.5.3. Now I am working with 4.17.0. My guess is that this new wrapper caused the code not to work. Any help is appreciated. ---
**Author:** ![hossamhsb96](https://avatars.discourse-cdn.com/v4/letter/h/e0b2c6/32.png) [@hossamhsb96](https://forum.ionicframework.com/u/hossamhsb96)\ **Post date:** [December 4, 2018, 10:12pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/28 "2018-12-04T22:12:42Z")
thankss alot , you make my day ---
**Author:** ![subhrajitroy1989](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/subhrajitroy1989/32/123312_2.png) [@subhrajitroy1989](https://forum.ionicframework.com/u/subhrajitroy1989)\ **Post date:** [December 24, 2018, 1:40pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/29 "2018-12-24T13:40:52Z")
Hi JALO! I faced the same trouble after updating Ionic and adding A Blank App for Testing. The image was coming broken. I found a temporary solution by using the Earlier Ionic Blank Template and transferred the SRC and config.xml only. Then it worked. But it was a temporary fix. After reading your post, I came to know about the Update related to FILE\_URI. Thanks A Lot ---
**Author:** ![jaychouhan444](https://avatars.discourse-cdn.com/v4/letter/j/c5a1d2/32.png) [@jaychouhan444](https://forum.ionicframework.com/u/jaychouhan444)\ **Post date:** [January 22, 2019, 11:28am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/30 "2019-01-22T11:28:37Z")
> [@ljwiie](#): > > (\window).Ionic.WebView.convertFileSrc(imageData); worked for me , thanks you saved my day. ---
**Author:** ![priyag](https://avatars.discourse-cdn.com/v4/letter/p/ed8c4c/32.png) [@priyag](https://forum.ionicframework.com/u/priyag)\ **Post date:** [February 6, 2019, 12:04pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/31 "2019-02-06T12:04:36Z")
Hey I solved that problem.I struggled 2 days for this problem.After that i had an idea.Why can we convert file uri to base64 image after that by using DomSanitizer we can easily set the base64 image tot he img src tag.Please follow below steps we can easily solve that problem 1.Install the base64 plugin [https://ionicframework.com/docs/native/base64/](https://ionicframework.com/docs/native/base64/) 2.By using base64 plugin we can convert file\_uri to basse 64 image. openCamera() { const options: CameraOptions = { destinationType: this.camera.DestinationType.FILE\_URI, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, targetWidth: 1000, targetHeight: 1000, correctOrientation:true } this.camera.getPicture(options).then((imageData) =\> { this.base64.encodeFile(imageData).then((base64File: string) =\> { this.base64Image =base64File; }, (err) =\> { console.log(err); alert(err); }); ``` }, (err) => { console.log(err); }) ``` } 3.Initialize DomSanitizer in constructor constructor( private domSanitizer: DomSanitizer); 4.By using domsanitizer we can display the image in html page \ ---
**Author:** ![RahmaMz](https://avatars.discourse-cdn.com/v4/letter/r/51bf81/32.png) [@RahmaMz](https://forum.ionicframework.com/u/RahmaMz)\ **Post date:** [February 28, 2019, 10:15am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/32 "2019-02-28T10:15:47Z")
Thanks a lot for this share ! you saved my day ! ---
**Author:** ![kentryansilao](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@kentryansilao](https://forum.ionicframework.com/u/kentryansilao)\ **Post date:** [March 20, 2019, 8:48am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/33 "2019-03-20T08:48:30Z")
[![](https://global.discourse-cdn.com/ionicframework/original/3X/c/4/c4e406cc91b447a4a141dd88e834e5d8ed7aa22b.png)](https://forum.ionicframework.com/u/ljwiie) [ljwiie](https://forum.ionicframework.com/u/ljwiie) [Oct '18](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/25) In ionic v3，just like yours: this.image = (\window).Ionic.WebView.convertFileSrc(imageData); this works for me 🙂 ---
**Author:** ![Mehdimka](https://avatars.discourse-cdn.com/v4/letter/m/3ec8ea/32.png) [@Mehdimka](https://forum.ionicframework.com/u/Mehdimka)\ **Post date:** [April 19, 2019, 7:31pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/34 "2019-04-19T19:31:51Z")
It works fine! Thanks ---
**Author:** ![arulyan](https://avatars.discourse-cdn.com/v4/letter/a/d26b3c/32.png) [@arulyan](https://forum.ionicframework.com/u/arulyan)\ **Post date:** [May 19, 2019, 10:50am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/35 "2019-05-19T10:50:18Z")
What does the extension -lc switch do ? ---
**Author:** ![santanajensy](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@santanajensy](https://forum.ionicframework.com/u/santanajensy)\ **Post date:** [August 22, 2019, 3:25am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/36 "2019-08-22T03:25:06Z")
just save my day, thank you this.image = (window).Ionic.WebView.convertFileSrc(imageData); ---
**Author:** ![fikry\_id](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fikry_id/32/126972_2.png) [@fikry\_id](https://forum.ionicframework.com/u/fikry_id)\ **Post date:** [November 18, 2019, 6:47am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/37 "2019-11-18T06:47:33Z")
Thanks, nice great !!! ---
**Author:** ![kevinisyantaid](https://avatars.discourse-cdn.com/v4/letter/k/f04885/32.png) [@kevinisyantaid](https://forum.ionicframework.com/u/kevinisyantaid)\ **Post date:** [November 29, 2019, 10:34am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/38 "2019-11-29T10:34:13Z")
Thanks it works … ---
**Author:** ![vorya](https://avatars.discourse-cdn.com/v4/letter/v/f1d935/32.png) [@vorya](https://forum.ionicframework.com/u/vorya)\ **Post date:** [November 29, 2019, 11:49pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/39 "2019-11-29T23:49:02Z")
work for me too , thanks ---
**Author:** ![Zachariee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/zachariee/32/130036_2.png) [@Zachariee](https://forum.ionicframework.com/u/Zachariee)\ **Post date:** [January 2, 2020, 3:36pm UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/40 "2020-01-02T15:36:15Z")
It’s a good solution. You truly help save me a lot of time. Thank you. ---
**Author:** ![Dinesh\_Gurjar](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dinesh_gurjar/32/129251_2.png) [@Dinesh\_Gurjar](https://forum.ionicframework.com/u/Dinesh_Gurjar)\ **Post date:** [March 19, 2020, 10:05am UTC](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977/41 "2020-03-19T10:05:33Z")
in ionic 4 use this code working fine on android /\*\* \*take photo from Camera \*\*/ ```auto public async takeSubPhotoCamera(){ const options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, saveToPhotoAlbum: false, correctOrientation: true, } await this.camera.getPicture(options).then((imageData: any) => { this.myphoto = 'data:image/jpeg;base64,' + imageData; this.previewImage(this.myphoto); }, (err) => { // Handle error }); } ``` /\*\* \*take photo from library \*\*/ ```auto public async takeSubFileLibrary() { const options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, correctOrientation: true, sourceType:0, } this.croppedImage = ''; await this.camera.getPicture(options).then((imageData : any) => { this.myphoto = 'data:image/jpeg;base64,' + imageData; this.previewImage(this.myphoto); }); } ``` [Previous page](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977.md?page=1) [Next page](https://forum.ionicframework.com/t/unable-to-display-image-using-file-uri/84977.md?page=3)