CODEWITHSUNDEEP
jupyter-notebookmarkdown
v.tralala
v.tralala

Reputation: 1685

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

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?

Upvotes: 10

Views: 14388

Answers (4)

Savrige
Savrige

Reputation: 3755

you can also change the image witdh with css:

%%html
<style>.inner_cell img{ width:450px; float:left }</style>

Upvotes: 0

theo olsthoorn
theo olsthoorn

Reputation: 503

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

Upvotes: 3

v.tralala
v.tralala

Reputation: 1685

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

  1. Copy your image (not the URL/path but i.e open in Paint and select region to copy, then press Ctrl+C)
  2. go to notebook cell in math mode and paste image with Ctrl+V
  3. something similar as the following should appear in your cell: ![image.png](attachment:image.png)
  4. 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
  5. somehow the pasted image is linked to the text "attachment:image.png" thus this part should not be touched while editing

Upvotes: 7

Antony Hatchkins
Antony Hatchkins

Reputation: 33984

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

Upvotes: 9

Related Questions