Embed local image in Dash app with HTTP?

Specific Domains Web Stack
1

I am developing a Dash.jl app and discovered that I cannot embed local pictures. One workaround I found is to somehow host images on a local server in order to display them, but I have no idea how to do that in Julia.

My idea was to serve a small html page with the image, and embed that in the Dash app by using it’s url, but I still can’t get the image to be displayed with HTTP. Here is a small example:

using HTTP

HTTP.serve("127.0.0.1", 8080) do request::HTTP.Request
   try
       return HTTP.Response("""<html>
<body>

<button type="button">Click Me!</button>
<h1>Some title</h1>

<img src=C:\\Users\\cioarca\\Documents\\x.png width="300" height="200">

</body>
</html>""")
   catch e
       return HTTP.Response(404, "Error: $e")
   end
end

Any suggestion is highly appreciated.

2

The easiest way is probably to just embed them as base64-encoded data:

using Dash, DashHtmlComponents, Base64
app = dash()
app.layout = 
    html_div([
        html_h1("embedded image", style=(textAlign = "center",)),
        html_img(src="data:image/png;base64,$(open(base64encode, "/path/to/file.png"))"),
    ])
run_server(app, "0.0.0.0", 8080)
3 Likes
3

Browsers do not usually allow a web page served from a server to also access local files. Imagine the security vulnerability when hitting some arbitrary web page that reads your private files. Your server must also serve the image. I don’t know about Dash, so I can’t suggest how you would do that.

1 Like
4

Thank you very much! It worked!

dash
dash956×932 65.6 KB