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

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

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!)

+1

Absolutely critical to the using formatted embedded images/videos (dimension adjustments, alignments) within an Obsidian document while keeping them cross-compatible with other devices and future proof. Specifying the absolute path causes the image path to now be device specific, breaking the document on other devices. This is a huge pitfall to the acclaimed future-proof nature of Obsidian, if the images/videos embedded within a document breaks as soon as it is used on another device.

I plead the devs to consider this a bug, rather than a feature, and sort this out as quick as possible.

4 Likes

It has been more than 2 years, and this problem still hasn’t been solved.

1 Like

Appreciate this can be resolved quickly.

1 Like

Ran into this problem today

+1

would greatly appreciate it if this is fixed

Html raw tags are very ugly and the very last resort if literally nothing else has worked.
Better to pick some plugins, imo

+1
would greatly appreciate it if this is fixed

Check this: talengu/obsidian-local-img-plugin: show local image (github.com)

For me that plugin didn’t work. What worked for me is the solution from stormsc to put the image into a “div” instead of an “img”. Unfortunately it only shows up in reading mode but it is still a good solution.

 <div src="image.png" class="internal-embed"></div> 

Addition: What I wanted was to have an image link to another page and I changed my approach to use another solution that has been mentioned here then keeping that page in reading mode for the link to work. Though I understand this won’t be a solution for everyone.

[![[Image.png|400]]](<OtherPage>)