Support `<img>` and `<video>` tag with src relative path format

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

30 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:

5 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

6 Likes

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

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

3 Likes

Related Feature Request

https://forum.obsidian.md/t/relative-path-inside-html-without-this-there-is-no-consistency/39426

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.

1 Like

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

1 Like

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.

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

4 Likes

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>
4 Likes

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.

2 Likes

For the next tree path:

.
└── Content
    ├── obsidian-note.md
    ├── Img
    │   ├── circle.png
    │   ├── hmmm.png
├── triangle.png

With version v1.03:
If you are writing inside obsidian-note.md you can link images with relative paths:

  • ![circle](./Img/circle.png)
  • ![triangle](..//triangle.png)

But this does not work with html format:

  • <img src="./Img/circle.png" width="50" height="50" />
  • <img src="../triangle.png" width="50" height="50" />

Note: ./ = current directory, ../ = parent directory

3 Likes

For the ![circle](./Img/circle.png) example, Is there a way to set the width and height of an image? The following code didn’t work:

<div style="width: 96px;">
![](./circle.png)
</div>

The Obsidian team’s reasoning is clearly weak. Not only does this somehow magically not affect any other Electron based markdown editor, but you can even make plugins that add the same functionality without much work too. And it’s not like the text files are much different from images within the workspace directory, there’s no secondary, backwards, system to access other files than markdown files. If you can access local text files, you can access local image files and whichever other type of file.

Truly, what a reasonable standpoint to say that it’s a security policy like it isn’t possible to either disable or work around without end-user friction. I suppose they should just limit access to text files too, because they’re also local files. Might as well switch over to pen and paper at that point too.

I honestly do not understand their reasoning to arbitrarily impose usability limitations like this. It’s not like they can’t limit file system access to the workspace folder and simply translate relative paths to it and not outside of it.

4 Likes