I'm trying to build a function that lets me select part of a webpage containing text and images, then copy it into Obsidian. The text copies successfully, but the images either disappear or remain as remote links instead of becoming actual image files in my notes. What would be the right way to preserve the images locally when copying the selection?
3 Answers
For Obsidian, a simpler solution may be to paste or generate Markdown containing the image URLs and use an importer, setting, or suitable plugin that downloads those images into the vault. That avoids rebuilding the entire clipboard payload. If you need full control, a browser extension can intercept the selection, download each image, rewrite the content to reference local attachments, and then insert the resulting Markdown.
Treat this as an import process rather than ordinary copy and paste. Read the selected HTML, collect the text and each image URL, fetch the images as Blobs, save them in the vault’s attachments folder, and generate Markdown that points to those local files. It’s best to test the workflow with one image first, then add multiple images and more complicated page content.
A normal copy command usually copies text and HTML, but the HTML’s tags generally contain URLs rather than the actual image bytes. You could use the asynchronous Clipboard API to fetch an image as a Blob and add an image representation to a ClipboardItem, but this gets complicated quickly and browser permissions or cross-origin restrictions may interfere. Also, handling several images this way is not as straightforward as copying one standalone image.
That makes sense. I’ll first try fetching one image and saving it locally before attempting the complete selection workflow.