Embedding or displaying local images

[FaustineLi]

I can't find a way to embed or display local images, either through html or in a plotly graph. This seems to be a limitation with the server can do (in the former case) or a lack of support (in the later case).

My intended use case is have a user point to a directory of images. I want to display the image that the user selects. The image is then classified using a model built in Keras.

Is there any way to display an image locally?

[chriddyp]

Great question @FaustineLi !

Serving general static content isn't supported out of the box with Dash (yet). Here are two workarounds for now:
1 - You can serve files by adding a static file route to the underlying dash server.
2 - You can serve files by starting a separate file server like Python's built-in file server ($ python -m SimpleHTTPServer 8000) or something like nginx or apache.
3 - You can upload images to a 3rd party image hosting site like Amazon S3

1 is the simplest way to go and works great for just running apps on your own machine. Here's a simple example that displays PNGs from my personal Desktop (mostly screenshots of Plotly!).

Note that if you deploy this app, you'll want to be careful that the static file serving route is only serving files from a single directory (otherwise, malicious users might be able to view any file on the server). This example includes a whitelist of files and only serves files from the Desktop.

import dash
import dash_core_components as dcc
import dash_html_components as html

import flask
import glob
import os

image_directory = '/Users/chriddyp/Desktop/'
list_of_images = [os.path.basename(x) for x in glob.glob('{}*.png'.format(image_directory))]
static_image_route = '/static/'

app = dash.Dash()

app.layout = html.Div([
    dcc.Dropdown(
        id='image-dropdown',
        options=[{'label': i, 'value': i} for i in list_of_images],
        value=list_of_images[0]
    ),
    html.Img(id='image')
])

@app.callback(
    dash.dependencies.Output('image', 'src'),
    [dash.dependencies.Input('image-dropdown', 'value')])
def update_image_src(value):
    return static_image_route + value

# Add a static image route that serves images from desktop
# Be *very* careful here - you don't want to serve arbitrary files
# from your computer or server
@app.server.route('{}<image_path>.png'.format(static_image_route))
def serve_image(image_path):
    image_name = '{}.png'.format(image_path)
    if image_name not in list_of_images:
        raise Exception('"{}" is excluded from the allowed static files'.format(image_path))
    return flask.send_from_directory(image_directory, image_name)

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

Here's what the app looks like:

[chriddyp]

Closing this for now. Feel free to reopen if this solution doesn't work for you!

[FaustineLi]

Thanks! That definitely worked!

[chriddyp]

Another way to display images without adding an extra route is to base64 encode them:

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)

[shapiromatron]

Thanks, this was helpful. This is especially useful if you want to bundle your standard css resources in a relative path in a project. I feel like this might be a really common use-case that may be good to bake into the docs; if you're interested @chriddyp I could submit a PR.

I'm coming from the django-world; here's a minimal example for static serving any arbitrary resource from a /static/ path, using a pattern similar to django static files in debug mode (docs):

import dash
import flask

STATIC_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static')
app = dash.Dash()

@app.server.route('/static/<resource>')
def serve_static(resource):
    return flask.send_from_directory(STATIC_PATH, resource)

app.css.append_css({
    'external_url': '/static/site.css',
})

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

[zshujon]

I've the same problem with Video.
Please tell me what to do?

[chriddyp]

@zshujon - could you open an issue in the community forum? More folks are likely to help you out with implementation details there: https://community.plot.ly/c/dash

[cfeng2016]

I found the base64 encoding approach works in general but doesn't work if I am working under virtualenv. Why and is there a work around? Thanks.

[chriddyp]

@cfeng2016 - Can you create a small reproducable example?

[cfeng2016]

@chriddyp It looks like the problem is system/python dependent. My Mac with Python 3.6.2 under virtualenv has problem but Ubuntu with Python 2 does not (with or without virtualenv). I checked the html code. The problem came when it is

<img src="data:image/png;base64,b'......'" class=......>

Removing 'b'' parts solves the problem. So I think it's from the return of the function base64.b64encode()

[cfeng2016]

@chriddyp - It looks like the Python version causes the difference. Using decode() function will fix it regardless of Python environment.

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.decode()))
])

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

[ianwaring]

I know it's a bit around the houses with Base64 versions - but how do I adjust the size of the image using html.Img() once I have it? Trying to find any documentation to see if there are methods I can invoke to alter the size! Any help, guidance etc would really help my sanity :-}

[chriddyp]

@ianwaring - try out the style parameter which sets inline css like:

html.Image(src='...', style={'width': '500px'})

I recommend messing around with these CSS inline styles by using Chrome's dev tools: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/.