blocks|key|4470975|text|或者，您也可以使用普通的HTML，它允许您更改高度和宽度，并且仍然由<img+src>解释器读取：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4470976|<img+src="subdirectory/MyImage.png"+width=60+height=60+/>|code-block|syntax|javascript|4470977|entityMap^0|Y|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Alternatively, you can use a plain HTML <code>&lt;img src&gt;</code>, which allows you to change height and width and is still read by the markdown interpreter:

<pre><code>&lt;img src="subdirectory/MyImage.png" width=60 height=60 /&gt;
</code></pre>

blocks|key|4471022|text|除了使用超文本标记语言(+Markdown+)或使用%25%25HTML魔术：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4471023|如果您需要指定图像高度，这将不起作用：|4471024|<img+src="image.png"+height=50>+<--+will+not+work|code-block|syntax|javascript|4471025|这是因为Jupyter中的CSS样式默认对img标记使用height:+auto，它覆盖了HTML+height属性。您需要改写CSS+height属性：|4471026|<img+src="image.png"+style="height:50px">+<--+works|4471027|entityMap^0|Q|6|0|0|0|L|3|S|C|1W|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|R|$]]

In addition to the other answers using HTML (either in Markdown or using the <code>%%HTML</code> magic:

If you need to specify the image height, this will not work:

<pre><code>&lt;img src="image.png" height=50&gt; &lt;-- will not work
</code></pre>

That is because the CSS styling in Jupyter uses <code>height: auto</code> per default for the <code>img</code> tags, which overrides the HTML height attribute. You need need to overwrite the CSS <code>height</code> attribute instead:

<pre><code>&lt;img src="image.png" style="height:50px"&gt; &lt;-- works
</code></pre>

blocks|key|4470884|text|下面是如何使用Markdown来实现这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4470885|![Image+of+Yaktocat](https://octodex.github.com/images/yaktocat.png)|code-block|syntax|javascript|4470886|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's how you can do it with Markdown:

<pre><code>![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)
</code></pre>

blocks|key|4471495|text|如果您想使用Jupyter+Notebook+API+(不再使用IPython+)，我可以找到ipywidgets+Jupyter的子项目。您有一个Image小部件。Docstring指定您有一个字节的value参数。所以你可以这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4471496|import+requests
from+ipywidgets+import+Image

Image(value=requests.get('https://octodex.github.com/images/yaktocat.png').content)|code-block|syntax|javascript|4471497|我同意，使用Markdown样式更简单。但它向您展示了Image+display+Notebook+API。还可以使用width和height参数调整图像的大小。|4471498|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ipython/ipywidgets^0|22|5|2T|5|1B|A|0|0|0|1N|5|1T|6|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

If you want to use the Jupyter Notebook API (and not the IPython one anymore), I find the <a href="https://github.com/ipython/ipywidgets" rel="noreferrer">ipywidgets</a> Jupyter's sub-project. You have an <code>Image</code> widget. Docstring specifies that you have a <code>value</code> parameter which is a bytes. So you can do:

<pre class="lang-python prettyprint-override"><code>import requests
from ipywidgets import Image

Image(value=requests.get('https://octodex.github.com/images/yaktocat.png').content)
</code></pre>

I agree, it's simpler to use the Markdown style. But it shows you the Image display Notebook API. You can also resize the image with the <code>width</code> and <code>height</code> parameters.

blocks|key|4471762|text|虽然上面的许多答案给出了使用文件或Python代码嵌入图像的方法，但也有一种方法可以仅使用markdown和base64将图像嵌入到jupyter笔记本本身！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4471763|要在浏览器中查看图像，可以访问base64编码的PNG图像的链接data:image/png;base64,**image+data+here**，或访问base64编码的JPG图像的data:image/jpg;base64,**image+data+here**链接。可以在此答案的末尾找到示例链接。|offset|length|style|CODE|4471764|要将其嵌入到标记页面中，只需使用与文件答案类似的结构，但改为使用base64链接：![**description**](data:image/**type**;base64,**base64+data**)。现在，您的图像已100%25嵌入到Jupyter+Notebook文件中！|4471765|链接示例：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs%2B9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1%2BmE4ltNXEpI3eJQknCIGsiHSLJB%2BaO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==|4471766|示例标记：![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs%2B9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1%2BmE4ltNXEpI3eJQknCIGsiHSLJB%2BaO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)|4471767|entityMap^0|0|W|15|2K|15|0|15|1Q|0|5|5Q|0|5|60|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@$D|R|E|S|F|G]|$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|Y|8|@$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|O|$]]

While a lot of the above answers give ways to embed an image using a file or with Python code, there is a way to embed an image in the jupyter notebook itself using only markdown and base64!

To view an image in the browser, you can visit the link <code>data:image/png;base64,**image data here**</code> for a base64-encoded PNG image, or <code>data:image/jpg;base64,**image data here**</code> for a base64-encoded JPG image. An example link can be found at the end of this answer.

To embed this into a markdown page, simply use a similar construct as the file answers, but with a base64 link instead: <code>![**description**](data:image/**type**;base64,**base64 data**)</code>. Now your image is 100% embedded into your Jupyter Notebook file!

Example link: <code>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==</code>

Example markdown:
<code>![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)</code>

blocks|key|4470998|text|这对我在markdown单元格中有效。不知何故，我不需要特别提到，如果它是一个图像或一个简单的文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4470999|![](files/picture.png)|code-block|syntax|javascript|4471000|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works for me in a markdown cell. Somehow I do not need to mention specifically if its an image or a simple file. 

<pre><code>![](files/picture.png)
</code></pre>

blocks|key|4471599|text|我发现的一件事是图像的路径必须相对于笔记本最初加载的位置。如果您cd到不同的目录，如Pictures，则Markdown路径仍然相对于原始加载目录。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4471600|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

One thing I found is the path of your image must be relative to wherever the notebook was originally loaded from. if you cd to a different directory, such as Pictures your Markdown path is still relative to the original loading directory.

blocks|key|4471652|text|同意，我有相同的问题，这是什么工作和什么不是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4471653|WORKED:+<img+src="Docs/pinoutDOIT32devkitv1.png"+width="800"/>
*DOES+NOT+WORK:+<img+src="/Docs/pinoutDOIT32devkitv1.png"+width="800"/>
DOES+NOT+WORK:+<img+src="./Docs/pinoutDOIT32devkitv1.png"+width="800"/>*|code-block|syntax|javascript|4471654|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Agreed, i had the same issues and this is what worked and what did not:

<pre><code>WORKED: &lt;img src="Docs/pinoutDOIT32devkitv1.png" width="800"/&gt;
*DOES NOT WORK: &lt;img src="/Docs/pinoutDOIT32devkitv1.png" width="800"/&gt;
DOES NOT WORK: &lt;img src="./Docs/pinoutDOIT32devkitv1.png" width="800"/&gt;*
</code></pre>

I would like to include image in a jupyter notebook.

If I did the following, it works :

<pre><code>from IPython.display import Image
Image("img/picture.png")
</code></pre>

But I would like to include the images in a markdown cell and the following code gives a 404 error :

<pre><code>![title]("img/picture.png")
</code></pre>

I also tried

<pre><code>![texte]("http://localhost:8888/img/picture.png")
</code></pre>

But I still get the same error :

<pre><code>404 GET /notebooks/%22/home/user/folder/img/picture.png%22 (127.0.0.1) 2.74ms referer=http://localhost:8888/notebooks/notebook.ipynb
</code></pre>

How to embed image or picture in jupyter notebook, either from a local machine or from a web resource?

解释器

Python

我想在jupyter笔记本中包含图像。如果我执行了以下操作，它会起作用：from IPython.display import ImageImage("img/picture.png")但我想将图像包含在一个标记单元格中，下面的代码给出了一个404错误：![title]("img/picture.png")我也试过了![texte]("http://localhost:8888/img/pictu

问如何在jupyter笔记本中嵌入图像或图片，无论是从本地计算机还是从web资源？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jupyter笔记本中嵌入图像或图片，无论是从本地计算机还是从web资源？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在jupyter笔记本中嵌入图像或图片，无论是从本地计算机还是从web资源？
EN