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…

<img> tag with relative file path
#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

        }
    });
  }
}
2 Likes
#3

How did you install this plugin? I made a manifest file and added your code as the main.js file. Then I put these in a folder in the plugins folder.

When I try to turn it on in Obsidian, it says it fails to load.

#4

You’ll need to compile the code to make it work. Start with the template plugin and replace the code there.

1 Like
#5

I’ve updated the code since I made the first post. It’s now tested and works on iOS. Have not tested on Android.

import {Platform, Plugin, TFile} from "obsidian";
import type { MarkdownView } from 'obsidian';
import {platform} from "os";

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

      const targetLinks = Array.from(element.getElementsByTagName("img")).filter(
        (link) =>
          link.src.contains("_media")
      );
      const active_file = this.app.workspace.getActiveFile();
      let active_path = this.app.vault.getResourcePath(active_file)
      active_path = active_path.substring(0, active_path.lastIndexOf("/"));
      //console.log('active_file_path: ' + active_path)
      for (const link of targetLinks) {
        let clean_link = link.src.replace('app://obsidian.md/', '')
        // For iOS
        clean_link = clean_link.replace('capacitor://localhost/', '')
        //console.log('clean_link: ' + clean_link)
        let full_link =  active_path + '/' + clean_link
        //console.log('full_link: ' + full_link)
        link.src = full_link
        if(Platform.isMobile) {
          console.log("Running on mobile platform - setting object fit and height of img")
          link.style.objectFit = "contain"
          link.height = 100
        }
        }
    });
  }
}
1 Like
#6

I figured out how to compile the plugin using the example plugin. Thank you again for the code and the updated code.

Now I am trying to get it to work on Android and in live preview mode but this is really great. Thank you.

#7

For Android I tried adding clean_link = clean_link.replace("file://localhost/", ""); for Android but that didn’t work. Not sure what part of the file path to remove on Android.

#8

can you share your plugin?

#9

en…en I made one . thank your code. @ c3p0

#10

how to support live preview ？did you succeed ？