CODEWITHSUNDEEP
jupyter-notebookipythonjupyter
crabnebul
crabnebul

Reputation: 134

Inserting image into jupyter notebook using JavaScript

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

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.

Upvotes: 0

Views: 163

Answers (1)

Matt
Matt

Reputation: 27843

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.

Upvotes: 1

Related Questions