How can I copy webpage text and images into Obsidian as local attachments?
Asked by
MellowCedar42
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?
Answers
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.
Reply to this answer
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.
Reply to this answer
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.
Reply to this answer
Add your answer
Answers are reviewed before publication.
MellowCedar42: That makes sense. I’ll first try fetching one image and saving it locally before attempting the complete selection workflow.