How to display local images with <img>-tag and keep portability?

Help
#1

Things I have tried

  • Referencing local images works perfectly with markdown. I can then reference my images using a relative syntax (_media/image.png).
  • img-tags works fine as long as the src is an URL. I read that I can also reference local images using absolute paths with the img-tag, but I’ve not tested this myself.

What I’m trying to do

I’d like a portable way (works for both desktop and mobile) to display local images in html blocks (tables).

Is there a way to achieve this? If not, is it on the roadmap?
Would it be possible to write a plugin that “intercepts” image links in html and redirects to the absolute path of the image? I’d prefer not to alter the actual .md-files…

#2

I made a simple plugin to solve this. It works on desktop, but I’ve not tested it on mobile.

import { Plugin } from "obsidian";

export default class HtmlLocalSrcPlugin extends Plugin {
  async onload() {
    this.registerMarkdownPostProcessor((element) => {

      const targetLinks = Array.from(element.getElementsByTagName("img")).filter(
        (link) =>
          link.src.contains("_media")
      );

      //@ts-ignore
      let base_path = this.app.vault.adapter.basePath;
      console.log('base_path: ' + base_path)
      const active_file_path = this.app.workspace.getActiveFile().path;
      const active_path = active_file_path.substring(0, active_file_path.lastIndexOf("/"));
      console.log('active_file_path: ' + active_path)
      for (const link of targetLinks) {
        let clean_link = link.src.replace('app://obsidian.md/', '')
        console.log('clean_link: ' + clean_link)
        let full_link = 'app://local' + base_path + '/' + active_path + '/' + clean_link
        console.log('full_link: ' + full_link)
        link.src = full_link

        }
    });
  }
}