Embed vault images via HTML with relative path

[julianmueller]

What I’m trying to do

I’d like to have images in my MD files, that have some css style, and most importantly have a caption. I tried many things, but ended up using HTML with <figure> and <figcaption>. But I realised, that I cannot simply link my images (that are in the vault and have a unique name) but need to specify the whole absolute path:

<figure class="img" id="name">
    <img src="C:\Users\...\...\...\Screenshot 2022-08-12 195217.png">
    <figcaption>Bildunterschrift</figcaption>
</figure>

but i’d like to have it like this (with real spaces or %20 doesnt matter):

<figure class="img" id="name">
    <img src="Screenshot%202022-08-12%20195217.png">
    <figcaption>Bildunterschrift</figcaption>
</figure>

like I would with markdown:

![name](Screenshot%202022-08-12%20195217.png)
// or
![[Screenshot 2022-08-12 195217.png]]

I also had a look in the forum, eg this post, but this also didnt work:

Transclude \ Embed external files (audio, videos, pdfs) present on the computer outside the vault

Though I’m not sure why you would want to use an obsidian:// format rather than a simpler file lin - not that it makes any difference to embedding. Unlike file: links, obsidian: URLs would work even if the target vault is moved to another location (eg. onto an external volume). They would also work when the vaults are synced across multiple computers at differing file paths (eg. different volume names or user accounts). I am using the latter approach extensively. All this assumes that the fi…

Is there a way to embed images, that are in the vault, via HTML, only by their name or relative link in the vault?

Thanks

[woderenshenghua]

I ran into the same problem, do you have a solution now?

[julianmueller]

nope, not yet. maybe in the upcoming v0.16 release

[ninjineer]

I would not hold your breath that the next update will fix this. It seems like a simple thing, but it’s not.

Fundamentally, Markdown was designed as a way to mark up text documents in a human-readable way, such that those documents could be easily converted into HTML. By design the Markdown-to-HTML conversion process ignores any HTML it finds in the markdown file. It passes through untouched since it already is in the desired output format. So if you put <img src="relative/path/image.jpg" /> in your markdown document, you’ll get <img src="relative/path/image.jpg" /> out. This works fine as long as you’re converting file.md to file.html and maintaining the same file/folder hierarchy on disk.

When it comes to Obsidian, though, this is not the case. With Obsidian, everything you see, its entire interface is a single HTML document that only exists in memory. When you are working with a note, Obsidian, in the background, converts the markdown file into a block of HTML code that is then displayed in a portion of this virtual document. Since all this only exists in memory, there is no base for determining what a relative path is referring to. For wikilinks or markdown links this conversion process has an opportunity to examine the link content and substitute an absolute path. With the raw IMG tag, however, it never even sees that there is a URL there because HTML is ignored.

[julianmueller]

Thanks for the explaination!

But as i see it, using images in markdown is very tedious and needs alot of css tweaks/snippets to work in general. Is there an attempt to overhaul this? Like establishing a more common syntax to embed images, define their size, give them an alt name and a caption? Like all the stuff you do with every picture in papers/books/Latex etc.

I know this would extend on the original markdown implementation, and there are already many flavours, but i havent to come across a good and clear syntax for this yet. (Btw same goes for tables, that look aweful in almost every raw document). As long as the original image style is still recognised/backwards compatible, I dont see why there is no effort to extend on this?