Return image path from callback to html.IMG

Dash Python
1

I am trying to get the image path that is created in the callback to display the image that I have stored in the assets folder with the same name. When I run the code with the line that is commented out with the image name hard coded into it and no call back, it works fine. But when I try to do it with the call back nothing is displayed. The component that is returned matches the image name but I can’t get it to display. Does anyone know what I am doing wrong?

Code1
Code1797×85 12.6 KB

Code2

Thanks

2

Hi @smhibb01

The image you want to show are in the assets folder when the app is loaded in the first loading? :thinking:

3

The image ‘164240.jpg’ is in the Assets folder. In the first image of code, when I comment out the 2nd line with the callback and uncomment the 3rd line with the image name in it. The image comes up in my app.

But when I run it like it is shown with the callback the code runs but there is no image in the app.

4

@smhibb01

I think the problem you have is that “src” is not a “children” of the html.Img, is another property.

Use:

 Output('image', 'src'),

Instead of ‘children’ and just send the source as return

Also you can use the </> botton to share code:
image

5

That did the trick! Changing from ‘children’ to ‘src’ got a broken image to appear in app instead of nothing. Then by inspecting the image in the browser I was able to figure out rest the formatting.

Thanks!

1 Like