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

Feature requests
43

I’m sorry. On second thought, this plugin works for me, but one must switch to View Mode (instead of Edit Mode).

The other trick also works, but again, only on View Mode:

<div src=“./media/image261.jpg” class=“internal-embed”>

44

The <img src="./rel/img.png" width="..." /> format is the only one which works with GitHub repos with Retina / HiDPI images. Nothing else is supported.

Until this is implemented no one can use Obsidian to edit Markdown files which are primarily displayed on GitHub, like open-source project documentations.

1 Like
45

I imported notes from Joplin and had the same problem with the balise. I’ve done a simple script that do the job of replacing to be compliant with obsidian format. I’ve updated all my notes and it’s ok.

47

+1.

In the meantime, here’s a Templater template that creates an HTML structure for displaying a local image side-by-side with text in Obsidian.

Template 
<%*
const text = tp.file.selection() || "Text";
const position = await tp.system.suggester(
    ["Left", "Right"],
    ["left", "right"]
);
const addCaption = await tp.system.suggester(
    ["Caption", "No caption"],
    [true, false]
);

const imageBlock = `    <figure style="width: 50%; text-align: center;">
        <div src="IMAGEPATH" class="internal-embed" style="max-width: 100%; width: 100%; margin-bottom: 10px;"></div>${addCaption ? `
        <figcaption style="color: var(--text-faint); font-size: 0.85em;">Caption</figcaption>` : ''}
    </figure>`;
const textBlock = `    <p style="width: 50%; padding-left: 10px;">${text}</p>`;

tR = `<div style="display: flex; align-items: center;">
${position === "left" ? imageBlock + textBlock : `<p style="width: 50%; padding-right: 10px;">${text}</p>${imageBlock}`}
</div>`;
-%>

It prompts for:

  1. Image position (left/right)
  2. Whether to add a caption

Features:

  • By default, 50/50 width split between image and text
  • Works with local vault images only (uses Obsidian’s internal-embed class)
  • Caption is slightly smaller (0.85em) and faint-colored, adjusting to theme
  • Uses selected text if available, otherwise shows “Text” placeholder

Usage: Replace “IMAGEPATH” with your local image path.

Please let me know if there’s a more elegant solution to this. I prefer not to rely on third-party tools for this though. (Templater merely inserts the code.)

48

We have also proposed some work on electron to ease the overall issue of accessing a local file without compromising security.

Anyone have a link to this?