Reading: images using standard markdown links act differently than wikilinks (always new line)

In reading mode, images using standard markdown links act differently than wikilinks. Specifically, they are always on separate lines.

Minimum reproducible example:

![[Screenshot.png|200]] ![[Screenshot.png|200]]

![200](Screenshot.png) ![200](Screenshot.png)

Both wikilinks and Standard markdown embedded images are side-by-side in LP. In reading mode, wikilinks are side-by-side and markdown links are on different lines. Ideally, all combinations should display the same way in both LP and reading mode.

I need to insert two pictures into a note. pictures must be on the same line.
It not works with images from local storage.
But it works with drag-n-drop from website.

Steps to reproduce

  1. drag-n-drop some pics from website
  2. do the same with local pictures

Expected result

→ pictures side by side

Actual result

→ pictures one per line

Environment

  • Operating system: Windows
  • Obsidian version: 0.12.4

also see screen


I can’t repro. Post a screen recording of this happening in the help vault.

I just drag-n-drop image from Desktop.
Hmm… No problem if “Use [[Wikilinks]]” enabled. Images are inserted correctly from local storage

if “Use [[Wikilinks]]” disabled

Images one per line

temporary solution

temp_sol1

image

But… Markdown links are the basic functionality of the program. will this be fixed?

Steps to reproduce

  1. Turn off the Use [[Wikilinks]] option under Settings --> Files and links. This will auto-generate markdown links for attachments.
  2. Create or open a note.
  3. On a new line, drag and drop a local image file as an attachment.
  4. On the same line and immediately next to the first image attachment, drag and drop another local image file as an attachment.
  5. Resize the images as necessary so both images appear side-by-side in the editor. Or repeat steps 3 and 4 with smaller images.
  6. Switch to the reading view.
  7. The two images are now vertical as if they were placed on two separate lines.

Did you follow the troubleshooting guide? [Y/N]

Y
The steps were reproduced in the sandbox.
I believe the same bug was previously reported here: Cannot embed local images next to each other
But was supposedly to be squashed in version 0.10.10. (See last post in that thread.)
I have only used the now current version v1.5.3, and so am unaware if this was indeed fixed for that version or the bug has become reintroduced at some point thereafter.
This occurs with the Readable line length option enabled or disabled and with sufficient note space/image resizing.

Expected result

The expected behavior would be that the two images that were placed next to each other on the same line in the editor would appear as such in the reading view.

Actual result

Instead, in the reading view, the two images are seemingly placed in two separate lines and thus are vertical of one another.

Environment

SYSTEM INFO:
Obsidian version: v1.5.3
Installer version: v1.5.3
Operating system: Windows 10 Pro 10.0.19045
Login status: not logged in
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

If the Use [[Wikilinks]] option is turned on and one drags and drops two local files next to each other, then in the editor AND the reading view, both appear side-by-side as expected.

If utilizing the markdown links with files from the web, with their URL addresses, then the image files are still also side-by-side in both the editor AND the reading view.

I am a new user and adopter, so apologies if this is not actually supported, and is happenstance of things appearing in the editor versus how things are actually rendered. (As from some further reading it seems markdown, philosophically, adopts a “linearity” with the content. And so such side-by-side placements goes against this. I could be absolutely incorrect about this with my limited foray.)

Thank you for looking at my bug report.

Apologies for replying to my own post, I could not find a way to edit my original post. This is not an attempt to bump the post, but I have discovered something else that might help in tracking down the problem.

In utilizing markdown links for local image attachments, being something like:
![imageA](books/attachments/bookA.jpg)![imageB](books/attachments/bookB.jpg)
The images are side-by-side in edit mode, but appear in separate lines in reading view as stated in my original post.

However, if I use the file path with angle brackets, such as:
![imageA](<I:\Images\bookA.jpg>)![imageB](<I:\Images\bookB.jpg>)
Then the images appear side-by-side in both edit and reading views.

Why is that? What exactly dictates that these images should be on aligned on the same line? You should use tables to describe image placement explicitly — this the only way to control image placement reliably in markdown.

Thank you for taking time to reply. I was unaware of this at the time and will utilize tables from now on for specific placement of images within markdown.

For some additional context, I am migrating away from WYSIWYG editors to markdown and Obsidian. I was going through the Obsidian Help tutorial page and was learning about the two internal links, Wikilink and markdown, that Obsidian supports. I learned about embedding images and extrapolated from their given example to add another image next to one on the same line. The first attempt resulted in the two images appearing side-by-side in both the editor and in reading view. From this, I thought this is how such things worked until I tried using local image files. Due to this difference, I reasoned this might be a bug.

With further familiarization of the markdown spec and how other have approached this, as you have stated, utilizing tables seems to be the way to go. Thank you again for the assistance.

I’m not sure that it’s intentional for the local and remote images to behave differently like that, so whatever the intended behavior it seems to me that one of them should probably be changed.

In the meantime, I believe this can be controlled by CSS snippets, so that’s another possible option. (Sorry I can’t provide details, I haven’t learned the ins and outs of Obsidian styling.)

Minimum reproducible example

![[Screenshot.png|200]] ![[Screenshot.png|200]]

![200](Screenshot.png) ![200](Screenshot.png)

There are two ways of using links in Obsidian, wiki-links and markdown-links, which can both be used to embed images. I would expect them to behave the same, but they don’t.
In particular, with Markdown-links two images cannot be side-by-side.

Steps to reproduce

  • Have two local files with images duck.png, robin.png
  • create this file:
Markdown Links:
![300](duck.png)![300](robin.png)

Wikilinks:
![[duck.png|300]]![[robin.png|300]]

Did you follow the troubleshooting guide? [Y/N]

Yes I tried everything in the Obsidian Sandbox

Expected result

I would expect the layout of the first two images and the second two image to be the same

Actual result

When the images are small enough, the Wiki links images will be side by side, while the Markdown images have space around them. There is also space between “Markdown Links:” and the images after, but not between “Wikilinks:” and the images after.

Environment

SYSTEM INFO:
Obsidian version: v1.7.6
Installer version: v1.6.5
Operating system: Darwin Kernel Version 24.0.0: Tue Sep 24 23:37:25 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6030 24.0.0
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

I inspected the file with the development console and it can be seen that the two upper images are wrapped in <div> tags, while the lower two are wrapped in <span> tags


I guess this is not an Obsidian destroying bug, but maybe something that is unexpected, so I thought I should report it :slight_smile:

  1. Disable the Use [[Wikilinks]] option under Settings → Files and Links. This ensures Markdown links are auto-generated for attachments.
  2. Open an existing note or create a new one.
  3. Drag and drop a local image file into the note on a new line to add it as an attachment.
  4. On the same line, immediately after the first image attachment, drag and drop another local image file to add it next to the first one.
  5. Adjust the image sizes as needed so that both images appear side-by-side in the editor. Alternatively, repeat steps 3 and 4 using smaller images.
  6. Switch to the Reading View.

Observed Behavior

The two images, which appear side-by-side in the editor, are now displayed vertically in the reading view, as if placed on separate lines.

I can reproduce this although I don’t use images like that—I always place them in table cells or separate lines.