Jupyter Notebook position embedded image in markdown

Question

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 ..>?

This is possibly a duplicate of Markdown and image alignment. — CypherX
– CypherX, Commented Sep 13, 2019 at 20:36
@CypherX read the question please. I have explicitly asked "WITHOUT" the use of <img...> — Varun
– Varun, Commented Sep 13, 2019 at 20:38
@Alex thats same as using <img> I am curious can we do it without that. This is not an easy answer I am afraid. I have been looking for an answer for few hours now. — Varun
– Varun, Commented Sep 13, 2019 at 20:48

CypherX · Accepted Answer · 2019-09-13 21:29:35Z

5

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

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

edited Sep 13, 2019 at 21:29

answered Sep 13, 2019 at 20:36

CypherX

7,4034 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CypherX Over a year ago

@Varun Please check the stackoverflow link I shared. It has multiple solutions to embedding an image using markdown and aligning the image.

Varun Over a year ago

you need to understand why and what I am doing. I am embedding an image so it's not lost when I send a notebook. Otherwise I need to send the image along with the notebook and hope the the receiver downloads the image along with notebook.

CypherX Over a year ago

@Varun I see. Now I understand your requirement.

lansedene · Accepted Answer · 2023-10-31 03:33:54Z

0

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

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.
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.

edited Oct 31, 2023 at 3:33

answered Oct 31, 2023 at 3:31

lansedene

11 bronze badge

Collectives™ on Stack Overflow

Jupyter Notebook position embedded image in markdown

2 Answers 2

Advanced Example:

Output

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Advanced Example:

Output

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related