Insert static image to index.html

Community Support
#1

What I am trying to do

Insert a static image directly into the index.html file in order to customize it, inside the body section.

What I have tried:

It works if I just render the html file in my browser, but cannot find the image when I run bokeh serve --show … . I have tried creating a folder called static , including the image inside, even creating an images subfolder inside, and then using as route src="/templates/static/images/something.jpg", also src="/static/images/something.jpg" and also skipping the / in all combinations. Also tried just moving the jpg image to the same folder where index.html is located and this works when my browser renders the html, but not with the bokeh serve command.

<div>
    <img src="something.jpg" width = "200">
</div>

I am getting: 404 GET /something.jpg (::1) 0.32ms

I am new to Jinja so I am unsure about what kind of things I can use in my index.html that will not be touched (but properly recognized) by bokeh serve.

Thanks

#2

A Bokeh server only automatically serves a static route when the static dir is a subdirectory in a directory format app. Are you actually calling bokeh serve on a directory that contains a main.py? If you are calling bokeh serve on any .py file directly, that will never create a static route.

Also, since a Bokeh server can run multiple apps at once, the path is <app name>/static

#3

Thanks. Yes, the rest of my Bokeh controls / buttons are displayed correctly and actually work as intended when I press them.

I am calling bokeh serve --show path/to/my_folder where I have placed the main.py. and I have created a folder called static inside my_folder and placed the image file something.jpg inside static. There’s also a templates subfolder under my_folder where I have the index.html. My index.html contains

<body>
        {{ plot_div|indent(8) }}
        {{ plot_script|indent(8) }}
        <div>
            <img src="something.jpg">
        </div>
    </body>

but I am getting 404 GET /something.jpg (::1) . I have also tried src="/something.jpg", as well as src="images/something.jpg" (I tried creating an images subfolder inside static and placing there the image file) and more…

#4

@Pablo please note what I said above about the path:

Also, since a Bokeh server can run multiple apps at once, the path is <app name>/static

Here is an example that loads resources from a static dir that you can refer to:

#5

Thanks a lot! It fixed my problem by writing the following in my index.html file:

<img src="my_folder/static/something.jpg">

The missing part in my tests was my_folder which represents the name of my app (the folder where it is self-contained). I didn’t realize that by ‘the path is app_name/static’ you meant that the path I had to write in the html file was exactly that - I thought you just meant I had to create the static subfolder inside my app folder and that’s it.

Thanks again