使用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

出于安全原因，您不能开箱请求绝对路径。

你实际上要做的是写一个带有自定义处理程序的服务器扩展，并且可以在你选择的相对url下提供徽标文件。

这个扩展将完全访问本地文件系统并做任何它想做的事情。

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