CODEWITHSUNDEEP
pythonhtmlimagejupyter-notebook
Varun
Varun

Reputation: 135

Jupyter Notebook position embedded image in markdown

I drag and drop an image in Jupyter Notebook. By default it gives me a code:

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

Can I do something to above to align it right "WITHOUT" <img ..>?

Upvotes: 3

Views: 7078

Answers (2)

lansedene
lansedene

Reputation: 1

I found a way to solve this problem, for me it works well but has disadvantage:

  1. When we drag and drop an image in Jupyter Notebook, the image was saved as a base64 str inside a html img element. It is the way jupyter notebook attach and save an image. Your can inspect this element in the jupyter notebook page by open the devtool of the browser.

  2. You can just copy this element from devtool of the browser and paste it in the markdown cell in your jupyter notebook. Then you can adjust the alignment of this element easily and meanwhile the image has been attached to your notebook.

Disadvantage is: you have a very long markdown cell in your notebook because normally the base64 str for the image is long.

Upvotes: 0

CypherX
CypherX

Reputation: 7353

You can embed an image in markdown as follows. See other suggestions made here Markdown and image alignment 

<img style="float: right;" src="myimage.png">

Or,

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

Advanced Example:

I will share here one of the modifications I made for my jupyter notebooks markdown content. I hope this will be helpful. 

<div style="width:image width px; 
            font-size:80%; 
            text-align:center; 
            float: right; padding-left-right-top-bottom:0.5em;  
            border-style: solid; border-color: rgba(211, 211, 211, 0.1);
            background-color: rgba(0, 250, 250, 0.1);">
    <img src="./Resources/Markdown/898px-Row_and_column_major_order.svg.png" 
         alt="alternate text" 
         width=200 
         style="padding-bottom:0.5em;"/>
    <div style="padding: 3px; 
                width: 200px; 
                word-wrap: break-word; 
                text-align:justify;">
        Illustration of difference between row- and column-major ordering. <br> 
        <a href="https://en.wikipedia.org/wiki/File:Row_and_column_major_order.svg" 
           style="float: right;"> 
           Image Source 
        </a>
    </div>
</div>

Output

enter image description here

Note: This is possibly a duplicate of Markdown and image alignment.

Upvotes: 5

Related Questions