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,

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: GET http:…

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 image_directory = os.getcwd() + '/img/' and that worked!! I did not realize that was an absolute path. My …

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

[image] 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 uploade…

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. import dash app = dash.Dash(__name__) app.layout = html.Div(html.Img(src=app.get_asset_url('m…

[image] 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,{}’.form…

Is this method suitable for svg images ? Spoiler alert I does not work in my case

One more following up question: if I were using src = ‘ 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!

You probably need to set your ospath to your current working directory first. [ricardo] How to set the current working directory? python, current-working-directory asked by ricardo on 09:53PM - 27 Nov 09 UTC

[image] 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.

Adding local image

Dash Python

Topic		Replies	Views
Not able to display local image on to dash Dash Python	5	10837	October 13, 2020
How to Embed Images into a Dash App Dash Python tips-and-tricks	12	42402	March 22, 2024
PNG image not showing Dash Python	6	21831	August 8, 2025
Img Failing to Render on EC2 instance Dash Python	2	791	August 29, 2018
Plotly with Dash problem Dash Python question	1	428	July 6, 2022

Adding local image

Related topics