# Adding local image

**URL:** <https://community.plotly.com/t/adding-local-image/4896>\
**Category:** Dash Python\
**Created:** [July 11, 2017, 9:01pm UTC](https://community.plotly.com/t/adding-local-image/4896 "2017-07-11T21:01:33Z")\
**Posts on this page:** 5\
**Page:** 2

<div class="post-metadata">

**Author:** ![parijat.bhatt](https://avatars.discourse-cdn.com/v4/letter/p/977dab/32.png) [@parijat.bhatt](https://community.plotly.com/u/parijat.bhatt)\
**Post date:** [August 17, 2020, 9:10pm UTC](https://community.plotly.com/t/adding-local-image/4896/23 "2020-08-17T21:10:28Z")

</div>

I would really like to know why base64 encoding and decoding works instead of app.get\_asset\_rul()

---

<div class="post-metadata">

**Author:** ![blah](https://avatars.discourse-cdn.com/v4/letter/b/d07c76/32.png) [@blah](https://community.plotly.com/u/blah)\
**Post date:** [September 17, 2021, 12:46pm UTC](https://community.plotly.com/t/adding-local-image/4896/24 "2021-09-17T12:46:53Z")

</div>

[parijat.bhatt](https://community.plotly.com/u/parijat.bhatt)

> [@dayxx369](#):
>
> `src='data:image/png;base64,{}'.format(encoded_image.decode())`

me too. but thx [dayxx369](https://community.plotly.com/u/dayxx369)

---

<div class="post-metadata">

**Author:** ![Karuie](https://avatars.discourse-cdn.com/v4/letter/k/8baadc/32.png) [@Karuie](https://community.plotly.com/u/Karuie)\
**Post date:** [January 20, 2022, 9:27pm UTC](https://community.plotly.com/t/adding-local-image/4896/25 "2022-01-20T21:27:20Z")

</div>

It works, thx!

---

<div class="post-metadata">

**Author:** ![HashRocketSyntax](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/hashrocketsyntax/32/8972_2.png) [@HashRocketSyntax](https://community.plotly.com/u/HashRocketSyntax)\
**Post date:** [March 28, 2022, 9:38pm UTC](https://community.plotly.com/t/adding-local-image/4896/26 "2022-03-28T21:38:06Z")

</div>

Came here looking to reference images in a parent/ different folders like so

```python
html.Img(src="../../docs/images/some_img.png"),

```

hmm looks like there are other options for asset locations. i feel like that is low-level instantiation stuff that i wouldn’t trust to stick/ might be hardcoded in some places

```auto
>>> app.config

{
 'assets_folder': '/Users/me/Desktop/AIQC/aiqc/lab/assets',
 'assets_url_path': 'assets',
 'assets_ignore': '',
 'assets_external_path': '',

```

---

<div class="post-metadata">

**Author:** ![maartenbreddels](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/maartenbreddels/32/28524_2.png) [@maartenbreddels](https://community.plotly.com/u/maartenbreddels)\
**Post date:** [November 4, 2024, 2:19pm UTC](https://community.plotly.com/t/adding-local-image/4896/27 "2024-11-04T14:19:52Z")

</div>

The base64 encoding example didn’t function because it was still in a binary object, and should be decoded to a utf8 or ascii string.

The data URL for SVG image requires a different mimetype (image/svg+xml).

But in general I would recommend the app.get\_asset\_url method, since it allows the browser to cache the image, and makes the HTML smaller.

I’ve put everything together in a PyCafe example showing they all three method working:

> **[PyCafe - Dash - Display a local image using Dash](https://py.cafe/maartenbreddels/dash-local-image)**
>
> Create & Share Streamlit, Dash and Python Apps Online.

[Previous page](https://community.plotly.com/t/adding-local-image/4896.md?page=1)