Allow embed of Local images using ![](file:///...)

Feature archive
1

request to embed local images from their original location/directory using :
![FILE](file:///...) or <img src="file:///..."></img>

why :
I don’t want a copy in my attachment folder, I need to link/embed images from their original location, as the original image may evolve over time (same file name, but content gets replaced over time)

24 Likes
2

Agreed +1

2 Likes
3

Just to keep track of why this request hasn’t happened yet, see the explanation offered in this thread:

1 Like
4

I figured out you can use an HTML <img> like so:

  • Windows:
    <img src="app://local/C://Users/username/Documents/obsidian_notebook/state_transition.png">
  • Linux (you have to have two “/” before “home”):
    <img src="app://local//home/username/Documents/obsidian_notebook/test.jpg">
  • Mac (it doesn’t matter if you have one or two “/” before “Users”):
    <img src="app://local/Users/cusername/Documents/obsidian_notebook/test.jpg">
9 Likes
5

Thanks so much for sharing this. I had no idea this was possible.

Do you know any ways to get this to be automatically generated?

I have a lot of images I would like to move out of my vault, like enough to make this process a little daunting using that syntax. I had made this request: Ability to safely move linked image files outside vault

Off the top of my head, the best I can come up with now is to name all the images in sequence and use the syntax you provided, which I have not tried yet. This would make linking to a list of images easy. I guess if I embedded them with additional regular text numbers between images, I could use it as a library if I did a side by side pane (edit/preview) setup. Unfortunately, with this easier linking would require losing descriptive image names.

I guess I will be trying to make a macro for sequentially copying a list of image files paths and pasting them with the syntax you provided.

Beginning part:
<img
src="app://local/

Then path:
c://Users/username/Documents/obsidian_notebook/state_transition.png

Then end part:
">

This shouldn’t be to bad, but I suspect someone has already automated this.

Probably will be best to just isolate them in a folder, and generate a list of file paths using the folder index technique and append syntax in a spreadsheet. I guess I kind of gave answer med my own question, but if anyone has a better way, I am definitely interested.

Thank you very much.

6

A quick answer that comes to my mind is using scripts with a regexp to process markdown files. Or maybe just bash/batch/sed+regexp. The basic idea is

  1. Find out a common string sharing between all image paths that you want to modify.
    E.g., if all images are currently in a folder called “to_move_out”.
  2. Use this feature to locate markdown image tags.
    E.g., identify ![*]( + “to_move_out” + *.png).
  3. Extract image name as a variable. E.g., var $filename = “state_transition”
  4. Replace it with <img src="app://local/target_folder_path + var $filename + ">

I’m really bad at bash/batch and regexp. This is just an example FYI.

1 Like
7

Thanks for the explanation!

8

Download “Path copy copy” plugin for Windows and Espanso. Add a rule in Espanso:

  - trigger: ":img"
    replace: "<img src='app://local/{{clipboard}}'>"
    vars:
      - name: "clipboard"
        type: "clipboard"

Copy the path to the image with the help of Path Copy Copy than type :img in Obsidian and the link will be automatically adjusted

1 Like
9

this will be possible in v0.11

2 Likes
10

I have Obsidian 0.11, but the syntax:
![FILE](file:///home/path/to/file.jpg)
Does not work for me. I am on Linux. Is there a mistake in my syntax or has this not been implemented yet ?

I think it would be great if we could put as a link the obsidian URL of the file as an alternative option

1 Like
11

click and Hold the image file, then drag it to the obsidian editing area.

1 Like
12

You need to hold ctrl too, if not it wil copy the image to the vault. With ctrl, it can link to files outside the vault.

I personally also had issues. Holding ctrl while drag and drop the files seems to work. But in the end I use the “File path to URI” plugin. Much more convenient.

2 Likes