# Image not displaying with file\_uri

**URL:** <https://forum.ionicframework.com/t/image-not-displaying-with-file-uri/126428>\
**Category:** ionic-v3\
**Created:** [March 30, 2018, 4:15pm UTC](https://forum.ionicframework.com/t/image-not-displaying-with-file-uri/126428 "2018-03-30T16:15:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![arunicbe](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@arunicbe](https://forum.ionicframework.com/u/arunicbe)\
**Post date:** [March 30, 2018, 4:15pm UTC](https://forum.ionicframework.com/t/image-not-displaying-with-file-uri/126428/1 "2018-03-30T16:15:49Z")

</div>

I trying to the show the photo selected by the user from the camere before uploading to the server.

If I set the image src to file\_uri from the camera, it is not displaying.

---

<div class="post-metadata">

**Author:** ![Heenavora](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/heenavora/32/120922_2.png) [@Heenavora](https://forum.ionicframework.com/u/Heenavora)\
**Post date:** [March 31, 2018, 8:41am UTC](https://forum.ionicframework.com/t/image-not-displaying-with-file-uri/126428/2 "2018-03-31T08:41:21Z")

</div>

convert file uri to native uri

```auto
file.resolveLocalFileSystemURL(this.fileUri, function(entry) {
    var nativePath = entry.toURL();
    console.log('Native URI: ' + nativePath);
    document.getElementById('video').src = nativePath;

```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 31, 2018, 11:15pm UTC](https://forum.ionicframework.com/t/image-not-displaying-with-file-uri/126428/3 "2018-03-31T23:15:55Z")

</div>

Do not follow the advice in the previous post.

You only want to be directly manipulating the DOM (aka typing “document”) in an Angular application in very rare circumstances, where there is no better alternative. Use [property/attribute binding](https://angular.io/guide/template-syntax#binding-syntax-an-overview) instead wherever possible.

Also, you will save yourself hours of frustration if you never type the word “function” inside the body of one. [Here](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/) is why.

---

<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:42pm UTC](https://forum.ionicframework.com/t/image-not-displaying-with-file-uri/126428/4 "2021-07-19T21:42:30Z")

</div>