Inserting image into jupyter notebook using JavaScript

Question

My goal is to show a logo everytime I open my a notebook with jupyter. The way I went about this was to create a

• custom.js
• custom.css

file inside .jupyter/custom/ .

custom.js:

var html_outlie = `
<div id="test-container" class="container">
 <div id="test-logo">
 <img src="<what_location??>/logo.png"></img>
 </div>
</div>
`
jQuery("#notebook_panel").prepend(html_outlie)

and my custom.css has:

#test-container {
 background-color: white;
 padding: 50px 0;
}
#test-logo {
 text-align: center;
 padding-bottom: 50px;
}

The problem is, depending on which path I start the notebook, the logo will not show. How can I use an absolute path so that no matter where I start my notebook, the logo will always show?

The next step would be that everyone working on their own computer, and uses the same customizations, will see the logo.

Answer 1

You cannot out of the box make requests to absolute paths for security reasons.

What you are actually trying to do is a write a server extension with custom handlers, and one that can serve the logo file under a relative url of your choice.

This extension will have complete access to the local filesystem and do whatever it wants.

You may have to handle "base_url" on the javascript side, in case the notebook is deployed on JupyterHub behind a prefix, but that's not necessary for most users, nor when developping.