2

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

halfer
  • 19,824
  • 17
  • 99
  • 186
Varun
  • 125
  • 1
  • 2
  • 11
  • This is possibly a duplicate of [Markdown and image alignment](https://stackoverflow.com/questions/255170/markdown-and-image-alignment). – CypherX Sep 13 '19 at 20:36
  • @CypherX read the question please. I have explicitly asked "WITHOUT" the use of `` – Varun Sep 13 '19 at 20:38
  • You could use CSS as suggested here: https://msudol.com/how-to-align-images-in-markdown-without-html-or-extensions/ – Alex Sep 13 '19 at 20:40
  • @Alex thats same as using 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 Sep 13 '19 at 20:48
  • Possible duplicate of [github README.md center image](https://stackoverflow.com/questions/12090472/github-readme-md-center-image) – Alex Sep 13 '19 at 20:51
  • As seen in [github README.md center image](https://stackoverflow.com/questions/12090472/github-readme-md-center-image): "The Markdown syntax doesn't provide one with the ability to control the position of an image." – Alex Sep 13 '19 at 20:52
  • @Alex you are right. Please post the answer. I can then accept it. – Varun Sep 13 '19 at 20:59

1 Answers1

4

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.

CypherX
  • 7,019
  • 3
  • 25
  • 37
  • @Varun Please check the [stackoverflow link](https://stackoverflow.com/questions/255170/markdown-and-image-alignment) I shared. It has multiple solutions to embedding an image using markdown and aligning the image. – CypherX Sep 13 '19 at 21:08
  • 1
    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. – Varun Sep 13 '19 at 22:17
  • @Varun I see. Now I understand your requirement. – CypherX Sep 13 '19 at 22:19