使用 JavaScript 将图像插入到 jupyter 笔记本中

Question

我的目标是每次使用 jupyter 打开笔记本时都显示一个徽标。我这样做的方法是创建一个

• custom.js
• custom.css

.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)

我的 custom.css 有：

#test-container {
    background-color: white;
    padding: 50px 0;
}


#test-logo {
    text-align: center;
    padding-bottom: 50px;
}

问题是，根据我启动笔记本的路径，徽标不会显示。如何使用绝对路径，以便无论我从哪里开始我的笔记本，徽标都会始终显示？

下一步将是每个在自己的计算机上工作并使用相同的自定义设置的人都会看到徽标。

Answer 1

出于安全原因，您不能开箱即用地向绝对路径发出请求。

您实际上要做的是write a server extension with custom handlers，并且可以在您选择的相对网址下提供徽标文件。

此扩展将拥有对本地文件系统的完全访问权限，并为所欲为。

您可能必须在 javascript 端处理“base_url”，以防笔记本在 JupyterHub 上部署在前缀后面，但这对于大多数用户来说不是必需的，在开发时也不需要。