在jupyter notebook中使用markdown调整图像大小

Question

在jupyter notebook中使用markdown调整图像大小

htmlimagejupyter-notebookmarkdownjupyter

148

我想在Jupyter笔记本中添加图片，并希望有特定的高度和宽度。当我尝试使用 ![](img.png) 添加图片时，代码会添加完整的图片，但按照图片尺寸，我无法控制它。我尝试使用 ![](img.png =200x100) 但是图片就不会出现。有人知道如何添加预先指定尺寸的图像吗？

- Anil Verma

1

可能是重复的问题：如何更改Markdown图像大小？ - Waylan

将来，如果您使用![alt]，您将看到“alt”出现，并且您知道它正在工作，但是您链接中的某些内容未能正常工作。 - rAntonioH

8个回答

84

您可以直接使用HTML

<img src="image.JPG" alt="Drawing" style="width: 200px;"/>

- Mark

4

我认为这是正确的方法。不幸的是，Jupyter的Markdown渲染器不支持块属性（{: width=200}）。 - Quantum7

2

非常好的回答！是否可以同时设置高度和宽度？ - edesz

@edesz：是的，例如，在Mark上面的答案中使用“style =”width: 400px; height: 300px;“” - Quetzalcoatl

你可以使用百分比值来设置图片宽度 <img src="2D_affine_transformation_matrix.svg" width="90%"/>。 - Cam Cairns

60

Jupyter Markdown中可以控制图片，但图片需要在之前加上"attachment"才能显示。

<img src="attachment:image.png" width="400">

参见Simon Byrne。

使用URL直接工作：

<img src=https://image.slidesharecdn.com/tensorflowppt-160408142819/95/tensorflow-4-638.jpg?cb=1460125744 width="500">

- pudepied

2

在Jupyter Lab中，我成功地使用width=200进行了调整大小，但是没有使用style="width: 200px;"。 - webelo

2

问题在于当使用这种语法时，附件不再被识别并导出到html、reveal等格式。 - memeplex

1

请注意，至少对于我来说，我必须首先通过按键将内容粘贴到Markdown单元格中，以创建![](img.png)语法，然后再将其替换为上述内容。否则，它似乎无法找到附件源图像（attachment:image.png）。 - ijoseph

3

目前这在Colab中可以运行，但回答的正文却不能。 <img src="https://image.slidesharecdn.com/tensorflowppt-160408142819/95/tensorflow-4-638.jpg?cb=1460125744" width="500px"/> - Arthur

12

你也可以使用 IPython.display 中的 Image 模块。

例如，https://ipython.org/ipython-doc/3/api/generated/IPython.display.html#IPython.display.Image。

from IPython.display import Image
Image(url='https://www.maxpierini.it/ncov/pics/ITA.png', width=200)

如果图片文件是本地文件，请使用filename=，而不是url=。

- Max Pierini

1

与HTML标签相比，这种解决方案更可取，因为它允许通过LaTeX将笔记本导出为PDF并保留调整大小的图像。 - Dominik Kern

9

你需要像Mark展示的那样使用HTML，因为你不能用![](img.png)语法来实现。根据John Gruber的网站：

截至目前，Markdown没有指定图像尺寸的语法；如果这对你很重要，你可以简单地使用常规的HTML标签。

- Llewlyn

3

在Python 3.11和MacOS 14.0上，在一个Markdown单元格中，这个代码可以正常工作：

<img src="Screenshot.png" width="500"/>

但这个不会：

<div>
<img src="attachment:Screenshot.png" width="500"/>
</div>

使用的版本：

$ pip list|grep jupyter
jupyter                  1.0.0
jupyter_client           8.2.0
jupyter-console          6.6.3
jupyter_core             5.3.0
jupyter-events           0.6.3
jupyter_server           2.5.0
jupyter_server_terminals 0.4.4
jupyterlab-pygments      0.2.2
jupyterlab-widgets       3.0.7
jupyterthemes            0.20.0

- massisenergy

2

我在JupyterHub实例中使用JupyterLab，其他答案对我没有用。我通过在我的图像周围添加一个<div>来解决了这个问题。这是我的400px宽度和右对齐的图像：

<div style="max-width:400px;margin-left: auto; margin-right: 0;">
    ![My Image alt text](image.jpg)
</div>

- neves

似乎只适用于JupyterLab，因为在Jupyter笔记本中，这个方法不起作用。 - ions me

1

在此输入图像描述

将此处的“Code”更改为“Markdown”，就像屏幕截图中一样。稍后添加

<div> <img src="bar graph.png" alt="Drawing" style="width: 400px;"/></div>

你完成了

- Srabon Bhowmik

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MrFun · Accepted Answer

如果您正在通过将图像插入到Markdown中来附加它们，就像这样：

![Screenshot.png](attachment:Screenshot.png)

应该这样做：

<div>
<img src="attachment:Screenshot.png" width="500"/>
</div>

很遗憾，没有周围的divs它就无法工作：

// this does not work
<img src="attachment:Screenshot.png" width="500"/>

PS 我正在使用jupyter_core-4.4.0和jupyter笔记本。