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

Feature archive
21

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

2 Likes
22

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

23

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
24

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 Like
25

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

5 Likes
26

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

1 Like
27

Appreciate this can be resolved quickly.

1 Like
28

Ran into this problem today

29

+1

would greatly appreciate it if this is fixed

30

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

31

+1
would greatly appreciate it if this is fixed

32

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

1 Like
33

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>
1 Like
34

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

Raw HTML is ugly and goes against the spirit of markdown, but at least it keeps the note files more universally usable outside of Obsidian. For which reason I’m against solving this with plugins.

Actually, if that “goes against the spirit of markdown” is important, then I’d argue that a better solution is regular markdown image syntax with relative paths allowed, extended to allow for video embeds in a simple way if the extension is a video one.

3 Likes
36

+1
would greatly appreciate it if this is fixed

38

Temporary hack that I’ve been using is embedding images in Base-64 encoding.

There are online web-utilities that you can do this in the browser from. If you prefer to not upload images to these sites, you can use the command-line as well. See https://stackoverflow.com/questions/16918602/how-to-base64-encode-image-in-linux-bash-shell or https://stackoverflow.com/questions/65577255/encode-to-base64-a-specific-file-by-windows-command-line.

Once it’s been converted you just create your image tag in Obsidian:

<img height="400px" width="400px" src="data:image/jpeg;base64,YOUR_BASE64_TEXT_HERE" />

Just replace “image/jpeg” with “image/png” if it’s a PNG image. This method has the added bonus of consolidating all your images in the note file itself. However, this will fudge with your character and word count significantly (if that matters, I wouldn’t recommend this method).

Cheers.

1 Like
39

you can use this plugin: csdjk/lcl-obsidian-html-local-img-plugin (github.com)

40

Checked a year ago, to go from Joplin to Obsidian.

Same problem, no images, no solution. No go

42

Hi @lichanglong, I tested your plugin with Obsidian 1.6.7 and unfortunately it doesn’t work.

This icon is displayed instead:
ws