Img Failing to Render on EC2 instance


#1

Hey all,
I’ve been using dash for about 5 months now and have only ever been able to render images via the Base64 method described here: Adding local image

Recently I have been using an EC2 instance to host and have a stock image that I am calling into the app. For whatever reason, I can’t seem to get it to work. I changed permissions to be completely open (777), have the app file and the image file in the same directory, and have the direct file path to the image (essentially /home/img.png).

The code is this:

import dash
import dash_html_components as html
import base64
import os

app = dash.Dash()

image_filename = os.path.join(os.getcwd(), ‘img.png’)

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)

To be clear I have created a few apps not using an EC2 instance and the method from Chris’ answer in the forum link above has worked fine.

Was wondering if anyone had run into a similar issue or found a workaround.


#2

With dash==0.26.3, you can use the assets system to serve the image.

app.layout = html.Div([
html.Img(src=app.get_asset_url('img.png'))
])

Just put the img.png file in a folder named assets at the root of the project.


#3

This worked like a charm, thanks!