Is it possible to SCALE a pasted image in Jupyter Notebook?

Question

I can paste/drag&drop images into a jupyter notebook markdown cell. They will appear as follows:

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

The image is displayed correctly (but to large). I am however unable to scale them. I tried varius solutions from this question: Changing image size in Markdown

Unfortunately they all won't work for me. After pressing shift+Enter the cell just displays the entered text and the image is gone. What am I doing wrong?

score 8 · Accepted Answer · answered Oct 22 '19 at 19:39

8

As of today the accepted answer no longer works, the "proper" way of doing it is:

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

But even this variant is not ideal as it doesn't export image when saving as to html. Votes here are welcome: https://github.com/jupyter/nbconvert/issues/1057

answered Oct 22 '19 at 19:39

Antony Hatchkins

31,947
10
111
111

would be useful to know which jupyter version you are running. For me your solution worked as well, so I assume it's the more general way. Also exporting to html worked for me in both solutions. I am running jupyter v.4.4.0 – v.tralala Oct 23 '19 at 08:30
1

jupyter-core == 4.5.0 – Antony Hatchkins Oct 24 '19 at 03:58

v.tralala · Answer 2 · 2019-10-23T08:51:44.390

6

Problem solved in this anwser: https://stackoverflow.com/a/49150804/5105118

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

EDIT to be more precise I will add a step-by-step

Copy your image (not the URL/path but i.e open in Paint and select region to copy, then press Ctrl+C)
go to notebook cell in math mode and paste image with Ctrl+V
something similar as the following should appear in your cell: ![image.png](attachment:image.png)
edit this line to match <img src="attachment:image.png" width="400px"> or apparently in newer jupyter versions (>4.4.0) surround them with <div> tags as noted in the answer from Antony Hatchkins: https://stackoverflow.com/a/58511216/5105118
somehow the pasted image is linked to the text "attachment:image.png" thus this part should not be touched while editing

edited Oct 23 '19 at 08:51

answered Jan 17 '19 at 19:06

v.tralala

1,444
3
18
39

I'm facing the same problem. Would you please elaborate on how exactly this worked for you. If I replace `![image.png](attachment:image.png)` with `` the image disappears, but if I place both I see both images one above the other. – Antony Hatchkins Oct 22 '19 at 16:35
could you try editing the text instead of replacing? – v.tralala Oct 23 '19 at 08:51
2

I read the source code, I understand how it works, it really does not matter. – Antony Hatchkins Oct 24 '19 at 04:05

score 3 · Answer 3 · edited Oct 28 '21 at 02:45

3

In a markup cell copy an image, you then get something like this:

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

Then you may remove this line and copy this into the cell:

<div>
   <img src="attachment:afbeelding.png" width="300">
</div>

Then the image is scaled. The essence is that you first have to copy a real image into the markup cell. Depending on language, you always get the same text, but the image as soon as you execute the cell. Then replacing the text with the HTML text does the trick. Nothing happens until you copied a real image into the cell, which given

edited Oct 28 '21 at 02:45

Antony Hatchkins

31,947
10
111
111

answered Feb 21 '21 at 19:15

theo olsthoorn

455
3
6

Works fine in jupyter, but nbconvert doesn't accept it. – Antony Hatchkins Oct 28 '21 at 03:03

Is it possible to SCALE a pasted image in Jupyter Notebook?

3 Answers3