# 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:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brandon](https://avatars.discourse-cdn.com/v4/letter/b/f08c70/32.png) [@Brandon](https://community.plotly.com/u/Brandon)\
**Post date:** [July 11, 2017, 9:01pm UTC](https://community.plotly.com/t/adding-local-image/4896/1 "2017-07-11T21:01:33Z")

</div>

Hi,

Just wanted to know how to add local image to the page, I have tried "html.Img(src=’’), but it didn’t work. I have my image under same folder as my main.py.

Thanks,

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 11, 2017, 10:07pm UTC](https://community.plotly.com/t/adding-local-image/4896/2 "2017-07-11T22:07:57Z")

</div>

See the solution in [https://github.com/plotly/dash/issues/71](https://github.com/plotly/dash/issues/71) for now

---

<div class="post-metadata">

**Author:** ![alex\_01](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alex_01/32/1671_2.png) [@alex\_01](https://community.plotly.com/u/alex_01)\
**Post date:** [July 17, 2017, 8:48pm UTC](https://community.plotly.com/t/adding-local-image/4896/3 "2017-07-17T20:48:23Z")

</div>

Did something change that causes that example to break? I just want to show a local image. But I couldn’t get that to work with `html.Img(src='image.png')`, as pointed out by other users. So I found this post, and tried it out, dropdown menu and all. Unfortunately, the example code does not load the test image:

 ![](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f3097d388a0caa0818e0467f12dd3f723c2898d7.png)

Are there any gotchas that would make this not work?

One difference is that in your example you are listening on localhost, but I am running the server on host=0, so that I can work on this example on a vm.

I am curious about the line

```auto
@app.server.route('{}<image_path>.png'.format(static_image_route))

```

What is the purpose of \<image\_path\>.png?

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 20, 2017, 7:28pm UTC](https://community.plotly.com/t/adding-local-image/4896/4 "2017-07-20T19:28:18Z")

</div>

> [@alex\_01](#):
>
> Did something change that causes that example to break?

Nothing has changed that would break this. Could you try opening up your dev tools and seeing if there are any errors? You can also inspect the network tab to look at the request and `print()` some stuff in the `serve_image` function.

> [@alex\_01](#):
>
> I am curious about the line  
> @app.server.route(‘{}\<image\_path\>.png’.format(static\_image\_route))

`<image_path>` means that whatever is placed in that location of the string will get passed into the function itself. For example, if `/static/my-image.png` is passed in, then the function will get the name `'my-image'` in the `serve_image` function.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 20, 2017, 8:47pm UTC](https://community.plotly.com/t/adding-local-image/4896/5 "2017-07-20T20:47:42Z")

</div>

Another solution would be to base64 encode the image and set it as a string in the `html.Img` component directly (instead of serving the image).

Here’s a quick example:

```auto
import dash
import dash_html_components as html
import base64

app = dash.Dash()

image_filename = 'my-image.png' # replace with your own image
encoded_image = base64.b64encode(open(image_filename, 'rb').read())

app.layout = html.Div([
    html.Img(src='data:image/png;base64,{}'.format(encoded_image))
])

if __name__ == ' __main__':
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![alex\_01](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alex_01/32/1671_2.png) [@alex\_01](https://community.plotly.com/u/alex_01)\
**Post date:** [July 21, 2017, 1:13am UTC](https://community.plotly.com/t/adding-local-image/4896/6 "2017-07-21T01:13:06Z")

</div>

Thanks Chris I like the option of doing things with HTML. But I still want to learn to do it the Plotly/Dash way.

In the folder where I am running the script, I have a folder ‘img/’ where ‘1.png’ and ‘2.png’ live.

When I select an image from the drop-downs, the console logs a 404 error:

```auto
GET http://my.local.net:8050/static/2.png 404 (NOT FOUND)

```

Using `print` inside the `serve_image` callback I get:

```auto
image_path: 1
image_name: 1.png
image_directory + image_name: img/1.png

```

Problem is that I don’t know where the underlying Flask server is looking to find the `img/` folder. In your example, it found the Desktop folder. In my case, according to the 404 message, it is looking at `http://my.local.net:8050/static/1.png`. It is not _literally_ looking at /static/ is it? (I don’t understand URL routing completely, yet)

My assumption is that the “root” directory is actually the same directory where the python script lives. Yet Dash/Flask cannot find the images.

---

<div class="post-metadata">

**Author:** ![alex\_01](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/alex_01/32/1671_2.png) [@alex\_01](https://community.plotly.com/u/alex_01)\
**Post date:** [July 21, 2017, 2:04am UTC](https://community.plotly.com/t/adding-local-image/4896/7 "2017-07-21T02:04:59Z")

</div>

I just ran the example code on my desktop, using the same folder structure as you, Chris. Works!

Which made me look at `image_directory` that you define at the top.

So on my VM I have to do

```auto
image_directory = os.getcwd() + '/img/'

```

and that worked!!

I did not realize that was an absolute path. My bad.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [July 21, 2017, 2:05am UTC](https://community.plotly.com/t/adding-local-image/4896/8 "2017-07-21T02:05:30Z")

</div>

Yeah, that’s it exactly! Glad you figured it out 🙂

---

<div class="post-metadata">

**Author:** ![austin](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/austin/32/3328_2.png) [@austin](https://community.plotly.com/u/austin)\
**Post date:** [September 5, 2018, 10:21am UTC](https://community.plotly.com/t/adding-local-image/4896/9 "2018-09-05T10:21:37Z")

</div>

> [@chriddyp](#):
>
> base64 encode

FWIW, I have successfully been using base64 encode without problems. It doesn’t feel very “plotly-ish” but it gets the job done – and most importantly, it works not just on my local machine but when I deploy my app to AWS Elastic Beanstalk (the image is uploaded to an S3 bucket and called from there). However, I’m going to attempt the approach suggested here and see if I can reproduce it successfully. Static images (i.e., the company logo) are a part of every app I build!

---

<div class="post-metadata">

**Author:** ![Philippe](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/philippe/32/3521_2.png) [@Philippe](https://community.plotly.com/u/Philippe)\
**Post date:** [September 7, 2018, 6:37pm UTC](https://community.plotly.com/t/adding-local-image/4896/10 "2018-09-07T18:37:04Z")

</div>

The correct approach with the current version of dash is to use the assets system. You can put your image files in the assets folder, and use `app.get_asset_url('my-image.png')` to get the url to the image.

```auto
import dash
app = dash.Dash( __name__ )

app.layout = html.Div(html.Img(src=app.get_asset_url('my-image.png')))

```

> but when I deploy my app to AWS Elastic Beanstalk

Just make sure to also include the assets folder in the package for AWS Elastic Beanstalk.

---

<div class="post-metadata">

**Author:** ![sharmaji](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/sharmaji/32/4173_2.png) [@sharmaji](https://community.plotly.com/u/sharmaji)\
**Post date:** [September 18, 2018, 9:37am UTC](https://community.plotly.com/t/adding-local-image/4896/11 "2018-09-18T09:37:16Z")

</div>

> [@chriddyp](#):
>
> import dash import dash\_html\_components as html import base64 app = dash.Dash() image\_filename = ‘my-image.png’ # replace with your own image encoded\_image = base64.b64encode(open(image\_filename, ‘rb’).read()) app.layout = html.Div([html.Img(src=‘data:image/png;base64,{}’.format(encoded\_image))]) if **name** == ‘ **main** ’: app.run\_server(debug=True)

I used the same code, but I can’t see my image.

---

<div class="post-metadata">

**Author:** ![Hickson44](https://avatars.discourse-cdn.com/v4/letter/h/85f322/32.png) [@Hickson44](https://community.plotly.com/u/Hickson44)\
**Post date:** [September 29, 2018, 9:25pm UTC](https://community.plotly.com/t/adding-local-image/4896/12 "2018-09-29T21:25:48Z")

</div>

Is this method suitable for svg images ?

Spoiler alert  
I does not work in my case

---

<div class="post-metadata">

**Author:** ![yaochen](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/yaochen/32/4260_2.png) [@yaochen](https://community.plotly.com/u/yaochen)\
**Post date:** [January 10, 2019, 12:27am UTC](https://community.plotly.com/t/adding-local-image/4896/13 "2019-01-10T00:27:54Z")

</div>

One more following up question:  
if I were using  
src = ‘[http://localhost:8892/notebooks/Desktop/data%20processing/automating%20report/color\_gradient.png](http://localhost:8892/notebooks/Desktop/data%20processing/automating%20report/color_gradient.png)’  
it works great.

But src = ‘./color\_gradient.png’ do not work.

Could anyone help?

Thanks!

---

<div class="post-metadata">

**Author:** ![Blaceus](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/blaceus/32/2992_2.png) [@Blaceus](https://community.plotly.com/u/Blaceus)\
**Post date:** [January 10, 2019, 3:24pm UTC](https://community.plotly.com/t/adding-local-image/4896/14 "2019-01-10T15:24:03Z")

</div>

You probably need to set your ospath to your current working directory first.

> <https://stackoverflow.com/questions/1810743/how-to-set-the-current-working-directory>

---

<div class="post-metadata">

**Author:** ![naarkhoo](https://avatars.discourse-cdn.com/v4/letter/n/dec6dc/32.png) [@naarkhoo](https://community.plotly.com/u/naarkhoo)\
**Post date:** [January 23, 2019, 6:40pm UTC](https://community.plotly.com/t/adding-local-image/4896/15 "2019-01-23T18:40:08Z")

</div>

> [@Philippe](#):
>
> =app.get\_asset\_url(‘my-image.png’

make sure the picture is in the right directory ! in my case, I had to make a directory called “assets” and place the figures there.

---

<div class="post-metadata">

**Author:** ![cat0tail](https://avatars.discourse-cdn.com/v4/letter/c/cdc98d/32.png) [@cat0tail](https://community.plotly.com/u/cat0tail)\
**Post date:** [February 13, 2019, 3:33am UTC](https://community.plotly.com/t/adding-local-image/4896/16 "2019-02-13T03:33:02Z")

</div>

yeah, definitely this. you have to create a folder called assets and place the image there.

---

<div class="post-metadata">

**Author:** ![dayxx369](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@dayxx369](https://community.plotly.com/u/dayxx369)\
**Post date:** [June 5, 2019, 2:33pm UTC](https://community.plotly.com/t/adding-local-image/4896/17 "2019-06-05T14:33:10Z")

</div>

This is an easy work-around:

```auto
import dash
import dash_html_components as html
import base64

app = dash.Dash()

image_filename = 'file/path' # replace with your own image
encoded_image = base64.b64encode(open(image_filename, 'rb').read())

app.layout = html.Div([
    html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()))
])

if __name__ == ' __main__':
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![zPlotlyUser](https://avatars.discourse-cdn.com/v4/letter/z/7993a0/32.png) [@zPlotlyUser](https://community.plotly.com/u/zPlotlyUser)\
**Post date:** [October 21, 2019, 8:14am UTC](https://community.plotly.com/t/adding-local-image/4896/19 "2019-10-21T08:14:52Z")

</div>

@Philippe how would i control the size of the image using the above?

---

<div class="post-metadata">

**Author:** ![w0lf](https://avatars.discourse-cdn.com/v4/letter/w/9de053/32.png) [@w0lf](https://community.plotly.com/u/w0lf)\
**Post date:** [November 5, 2019, 1:17pm UTC](https://community.plotly.com/t/adding-local-image/4896/20 "2019-11-05T13:17:45Z")

</div>

@zPlotlyUser Have you tried the `height` property under the `html.Img` component? I believe it resizes the image to the specified height without perverting the aspect ratio.

```auto
 app.layout = html.Div([
                html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()),
                height=300)
              ])

```

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [February 19, 2020, 4:21pm UTC](https://community.plotly.com/t/adding-local-image/4896/22 "2020-02-19T16:21:31Z")

</div>

Split this topic on February 19, 2020, 4:21pm UTC

A post was split to a new topic: [Including html plotly graphs in dash app](https://community.plotly.com/t/including-html-plotly-graphs-in-dash-app/35180)

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