Python 如何从本地机器或网络资源在 jupyter notebook 中嵌入图像或图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32370281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to embed image or picture in jupyter notebook, either from a local machine or from a web resource?
提问by Ger
I would like to include image in a jupyter notebook.
我想在 jupyter 笔记本中包含图像。
If I did the following, it works :
如果我执行以下操作，它会起作用：
from IPython.display import Image
Image("img/picture.png")
But I would like to include the images in a markdown cell and the following code gives a 404 error :
但我想将图像包含在降价单元格中，以下代码给出了 404 错误：
![title]("img/picture.png")
I also tried
我也试过
![texte]("http://localhost:8888/img/picture.png")
But I still get the same error :
但我仍然得到同样的错误：
404 GET /notebooks/%22/home/user/folder/img/picture.png%22 (127.0.0.1) 2.74ms referer=http://localhost:8888/notebooks/notebook.ipynb
采纳答案by Sebastian Stigler
You mustn't use quotation marks around the name of the image files in markdown!
markdown 中图片文件的名称不能用引号引起来！
If you carefully read your error message, you will see the two %22parts in the link. That is the html encoded quotation mark.
如果您仔细阅读错误消息，您将%22在链接中看到两部分。那是html编码的引号。
You have to change the line
你必须改变线路
![title]("img/picture.png")
to
到
UPDATE
更新
It is assumed, that you have the following file structure and that you run the jupyter notebookcommand in the directory where the file example.ipynb(<-- contains the markdown for the image) is stored:
假设您具有以下文件结构，并且您jupyter notebook在存储文件example.ipynb（<-- 包含图像的降价）的目录中运行 命令：
/
+-- example.ipynb
+-- img
+-- picture.png
回答by Reblochon Masque
There are several ways to post an image in Jupyter notebooks:
有几种方法可以在 Jupyter 笔记本中发布图像：
via HTML:
通过 HTML：
from IPython.display import Image
from IPython.core.display import HTML
Image(url= "http://my_site.com/my_picture.jpg")
You retain the ability to use HTML tags to resize, etc...
您保留使用 HTML 标签调整大小等的能力...
Image(url= "http://my_site.com/my_picture.jpg", width=100, height=100)
You can also display images stored locally, either via relative or absolute path.
您还可以通过相对或绝对路径显示本地存储的图像。
PATH = "/Users/reblochonMasque/Documents/Drawings/"
Image(filename = PATH + "My_picture.jpg", width=100, height=100)
if the image it wider than the display settings:thanks
如果图像比显示设置宽：谢谢
use unconfined=Trueto disable max-width confinement of the image
用于unconfined=True禁用图像的最大宽度限制
from IPython.core.display import Image, display
display(Image('https://i.ytimg.com/vi/j22DmsZEv30/maxresdefault.jpg', width=1900, unconfined=True))
or via markdown:
或通过降价：
- make sure the cell is a markdown cell, and not a code cell, thanks @游凯超 in the comments)
- Please note that on some systems, the markdown does not allow white space in the filenames. Thanks to @CoffeeTableEspresso and @zebralamy in the comments)
(On macos, as long as you are on a markdown cell you would do like this:, and not worry about the white space).
- 确保单元格是降价单元格，而不是代码单元格，感谢@游凯超在评论中）
- 请注意，在某些系统上，markdown 不允许文件名中有空格。感谢@CoffeeTableEspresso 和@zebralamy 在评论中）
（在 macos 上，只要您在降价单元格上，您就会这样做：，而不必担心空格）。
for a web image:
对于网络图像：
as shown by @cristianmtr
Paying attention not to use either these quotes ""or those ''around the url.
如@cristianmtr 所示 注意不要使用这些引号""或''url 周围的引号。
or a local one:
或本地的：
demonstrated by @Sebastian
@Sebastian 演示
回答by cristianmtr
Here's how you can do it with Markdown:
以下是使用 Markdown 执行此操作的方法：
回答by dag
If you want to use the Jupyter Notebook API (and not the IPython one anymore), I find the ipywidgetsJupyter's sub-project. You have an Imagewidget. Docstring specifies that you have a valueparameter which is a bytes. So you can do:
如果您想使用 Jupyter Notebook API（不再是 IPython API），我会找到ipywidgetsJupyter 的子项目。你有一个Image小部件。Docstring 指定您有value一个字节参数。所以你可以这样做：
import requests
from ipywidgets import Image
Image(value=requests.get('https://octodex.github.com/images/yaktocat.png').content)
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 widthand heightparameters.
我同意，使用 Markdown 样式更简单。但它向您展示了图像显示 Notebook API。您还可以使用width和height参数调整图像大小。
回答by BlindSide
Here is a Solution for Jupyterand Python3:
这是Jupyter和Python3的解决方案：
I droped my images in a folder named ImageTest.
My directory is:
我把我的图片放在一个名为ImageTest. 我的目录是：
C:\Users\MyPcName\ImageTest\image.png
To show the image I used this expression:
为了显示图像，我使用了这个表达式：
Also watch out for /and \
还要注意/和\
回答by Alistair
Alternatively, you can use a plain HTML <img src>, which allows you to change height and width and is still read by the markdown interpreter:
或者，您可以使用纯 HTML <img src>，它允许您更改高度和宽度，并且仍由降价解释器读取：
<img src="subdirectory/MyImage.png" width=60 height=60 />
回答by Malik A. Rumi
回答by Pranav Pandit
This works for me in a markdown cell. Somehow I do not need to mention specifically if its an image or a simple file.
这在降价单元格中对我有用。不知何故，我不需要特别提及它是图像还是简单文件。
回答by Rave
In addition to the other answers using HTML (either in Markdown or using the %%HTMLmagic:
除了使用 HTML 的其他答案（在 Markdown 中或使用%%HTML魔法：
If you need to specify the image height, this will not work:
如果您需要指定图像高度，这将不起作用：
<img src="image.png" height=50> <-- will not work
That is because the CSS styling in Jupyter uses height: autoper default for the imgtags, which overrides the HTML height attribute. You need need to overwrite the CSS heightattribute instead:
这是因为 Jupyter 中的 CSS 样式height: auto默认使用img标签，它覆盖了 HTML 高度属性。您需要改写 CSSheight属性：
<img src="image.png" style="height:50px"> <-- works
回答by codeslord
I know this is not fully relevant, but since this answer is ranked first many a times when you search 'how to display images in Jupyter', please consider this answer as well.
我知道这并不完全相关，但是由于当您搜索“如何在 Jupyter 中显示图像”时，此答案多次排在第一位，因此也请考虑此答案。
You could use matplotlib to show an image as follows.
您可以使用 matplotlib 显示如下图像。
import matplotlib.pyplot as plt
import matplotlib.image as mpimg
image = mpimg.imread("your_image.png")
plt.imshow(image)
plt.show()
