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

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.

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

3 Likes

It is an imperative need. If you move your folder all the links are broken!

2 Likes

I was skeptical and I’m really surprised that it really works :joy:

Bumping this so that it doesn’t die.

It has been years! Markdown should gracefully accept HTML where possible.

I don’t want to use the ![[img.png]] syntax, since it won’t render in in my markdown->html pipeline.

I can’t use the![alt|width](img.png) syntax, since

  1. it doesn’t work for relative paths in Obsidian, so I have to edit elsewhere to be able to see the images;
  2. I can’t specify only height and let width derive from aspect ratio; and
  3. the |width or |widthxheight syntax is ignored by my → html pipeline anyway.

So, I want to have a real <img src="img.png" style="height: 210px"> syntax that works as it does in Typora and python-markdown.

It’s little papercuts like this that drive me away from all-inclusive siloing apps like Notion–don’t make me do it Obsidian’s way; just permit as much as possible.

(Also, the security concerns for doing have never been explained in a believeable way.)

4 Likes

If a feature request isn’t closed, it isn’t dead — you don’t need to bump. (Adding new info is fine, of course!)