<img> tag with relative file path

Please can we have relative file paths working for img tag?

Examples:

<img src="images/Blackbird%20drawing.jpg" style="width:40%;float:left"/>
 or
<div style="width:40%;float:left">
<img src="images/Blackbird%20drawing.jpg" />
</div>

The second example when I use IAwriter or Typora or 1writer on my MD file is rendered correctly (the picture is on the left with the text wrapped round it). For Obsidian you just get a ‘square’ indicating a picture in the text. I sync my vault with my phone and 1 writer works with the images subdirectory.
Obsidian document:

Obsidian preview:

Typora:

IAWriter:

Img tag works with http links but I do not want to use http links to pictures on the web as I am often in places with no internet access.

Use case or problem

For my vault I have a subdirectory of images. Standard markdown works but if I try and wrap this in html div or use img tag with relative path it fails.

The formats in the examples above work in all my markdown editors pointed at my vault.

Proposed solution

Allow relative path in image tag

Current workaround (optional)

I have searched obsidian forum and cannot find a work around

Related feature requests (optional)

None

17 Likes

I’ve got the same problem, do you know the solution?

1 Like

Same problem, any news?

1 Like

Same problem… I want to use simonhaenisch/md-to-pdf to render some of my vault as PDF, but it doesn’t support wikilink format images:

![[foo.png]]

so I have to use either

![](attach/foo.png) which does not support resizing

or plain ol’ <img width=200 src="attach/foo.png">
which works everywhere except inside Obsidian… :man_shrugging:

2 Likes

Same here. Any update? I think this is a higher priority, because currently in terms of compatibility, Typora is much better because of this feature

4 Likes

Looking for an update here as well. This would be great as a feature for publishing.

3 Likes

open the image in your browser, use the location path in the search box in the src=" "

This should not be tagged editor-legacy; it’s a problem with both the new inplace/Typora-style/WYSIWYG editor and the old viewer

2 Likes

Other Electron based apps can do this.

Without this functionality to have <img> tags with relative links, Obsidian will not be an option for managing notes that are eventually published on the web.

1 Like

Related Feature Request

c3po posted code for a plugin to make this work on desktop in this thread but I have not been able to get it to work.

After more than a year, this problem still hasn’t solved.

Use case or problem

Add support for relative path inside Html like:

<img src="ImagesFolder/my_image.png" alt="10" style="zoom:33%;" />

A link like this would not work in obsidian, I know that there is the trick to add “file//: …” followed by the full path, but this is a huge problem for consistency. Say that I move my vault folder somewhere else or into a new pc… Now all of my notes containing images are broken.

Proposed solution

Just support relative links inside html on obsidian. It’s been at least two years that I see people asking this on here and the go-to answer was “electron does not support this”. Well… Typora, MarkText and every other md editor based on electron actually support this.

Thank’s.

3 Likes

Anyone know how can I fix all my broken links automatically or if this request will ever be satisfied? Every markdown editor has this, and it’s the only thing keeping me from switching on obsidian.

Thank’s.

1 Like

A bit hacky- but works if the intend is to layout your document in a specific way without absolute paths.

<div style="width: 96px;">
     <div src="image.png" class="internal-embed"></div> 
</div>

On desktop:

<img src="app://local/absolute/path/to/your/vault/path/to/your/image.jpg" />

On iOS:

<img src="capacitor://localhost/_capacitor_file_/var/mobile/Containers/Data/Application/some-weird-looking-thing-which-is-obsidian’s-id/Documents/name-of-your-vault/path/to/image.jpg" />

The some-weird-looking-thing-which-is-obsidian’s-id Is quite non-trivial to obtain. One possible way is to use an app like a-shell to navigate to the vault folder, then you can inspect the path and see it. Also this weird looking thing changes with each Obsidian update.

same question. For the images embedded in html, it works with a absolute path like “c:\work\img\bird.png”, but fails with a relative path like “img\bird.png”. The relative path works for the standard markdown editor like typora or vscode. it’s confusing and hope fix this bug ASAP.