Back to Blog
Use CasesGuides

Broken Images in Shared Notes? Fix 3 Platforms in 2026: HackMD, Notion, Docs

Published on13 min read
Share

First week of the semester, my whole shared note turned into broken images

Quick embarrassing story first.

Last September, first week back, I opened a HackMD doc with three classmates I'd just met — group notes for lecture highlights and whiteboard photos. I eagerly pasted phone screenshots in one by one. On my screen everything looked complete, and honestly I was a little proud of it. Then that night a teammate messaged: "Hey, why is your whole section just broken-image icons?"

I froze. It looked perfectly fine on my end.

So I opened an incognito window, logged in with a different account, and yeah — they were right. A whole row of images had turned into those cracked "failed to load" icons. Rough feeling. First collaboration with people I barely knew, and I'm the one who shipped a wall of broken images. I wanted to disappear.

If this has happened to you, this guide is the one I wish I'd read. It's not hard — nobody just told you upfront that shared notes have two ways to place an image.

Get one thing straight first: images are either "uploaded" or "hotlinked"

This is the root of every broken-image problem. Nail it and the rest is easy.

When you put an image in a shared note, there are only two paths.

The first is upload. The file gets copied and stored on the note platform's own servers. Think of it as printing a photo and gluing it into a physical notebook — the photo is stuck to the page, so whoever you hand the notebook to, the photo travels with it.

The second is hotlink (some call it "embed by link"). What sits in the note isn't the image itself, it's an address pointing to where the image lives somewhere else. Picture a notebook page that only says "photo is in the third drawer at my house." You can walk home and open the drawer; everyone else gets locked out at the front door.

See it? My broken images were the second kind. The screenshots I pasted lived somewhere only I had access to, and my teammates' browsers simply couldn't reach that "drawer."

At first glance the two look identical — the image shows up either way. The difference only surfaces the moment someone else, on a different machine, under a different account, opens it. And shared notes are by definition a bunch of people looking at the same thing, so basically everyone hits this trap.

HackMD: ![](url) is handy, but two hidden traps

HackMD is the go-to for a lot of CS and engineering study groups because real-time sync is instant — teammates see your text before you even hit Enter. It runs on Markdown.

The proper way to place an image is HackMD's built-in upload. Three ways to do it:

  1. Drag the image file straight into the editor
  2. Click the image icon in the toolbar and pick a file
  3. Copy an image and Ctrl+V / Cmd+V to paste

All three auto-generate a ![](image url) snippet and upload the image to HackMD. Do it this way and teammates usually see it.

But here's the first trap: the free tier caps each image at 1 MB. A casual phone screenshot easily runs 2–3 MB these days, so some images upload and some silently don't — the oversized ones just fail. The paid Prime tier raises it to 20 MB. So before a semester of group notes, build the habit: compress, then paste.

I actually counted: a full-screen iPhone screenshot averages about 2.4 MB, and a game capture or long web screenshot can blow past 4 MB. Paste those straight into free HackMD and three or four out of ten silently fail. The kicker — it throws no error at all; the page just quietly comes up a few images short, and you often don't notice until the whole note is submitted. "Compress first" isn't fussiness, it genuinely saves you. A free tool like Squoosh (squoosh.app) works — squash each under 1 MB and HackMD swallows it.

The second trap is sneakier, and a lot of people don't know the rule: HackMD image permissions inherit from the original note they were uploaded to.

Meaning? Say you paste an image into "Note A," then copy that image's URL into a shared "Note B." The day you delete Note A, or set Note A's read permission to yourself only, the image in Note B dies right along with it — instant broken image.

So in a HackMD group note, the safe move is: upload images directly into that shared note itself, don't copy links over from some private note. Remember this one rule and you cut your broken-image odds in half.

Notion: the same "paste" might be an upload or a hotlink

Notion needs no syntax, looks clean, and tons of people use it as the tidy summary page for a group project. But its image logic actually trips up beginners more.

Placing an image in Notion gives you two options:

  • Upload: pick a file from your computer, or drag an image file onto the page. This lives in Notion's own cloud. Most stable.
  • Embed link: paste an image URL.

Here's the catch: Embed link is a hotlink underneath. Notion just fetches the image from that URL in real time to display it. The moment the source image gets deleted or its permission gets closed off, your Notion page shows a cold little Failed to Load.

I couldn't figure out at first why some pastes stayed rock-solid and others died after a few days. Turned out to be simple — the difference was whether I'd hit Upload or Embed.

One common myth to bust: Notion's free tier no longer has a per-file upload size limit (there was a 5 MB cap in the early days; it's gone). So in Notion, if you can Upload, Upload — don't paste some sketchy external link just to save a step.

A small thing beginners miss: after embedding an image, the fastest way to confirm it's actually stable is to share the page as a public link and open it on your phone in a browser where you're not logged in. If even one turns into Failed to Load, it's a hotlink and it'll die the day the source goes down. Spend one minute testing — beats going pale in the classroom on presentation day, right?

Google Docs: inserting images is fine — Drive links are the landmine

Group reports still lean hardest on Google Docs, because the barrier is lowest and everyone already knows it.

Good news: Insert → Image → Upload from computer is safe. The image gets stored in the document, everyone you share with sees it, and it basically never breaks. Nothing to worry about here.

The real landmine is the other entry point: Insert → Image → By URL. Google has an explicit rule here — the URL you paste cannot be a drive.google.com link. You literally can't use a share link to one of your own Google Drive images as the image source; the system won't accept it.

Worse, hotlinking to Drive images got broader-uglier across the whole web. Per widespread reports from early 2024, Google's third-party-cookie policy changes broke a mass of pages and docs that had been hotlinking Drive images. You still see them on your account; a different person, a different environment, gets a blank. That's not a misconfiguration on your end — Google deliberately narrowed that path.

One line: personal cloud-drive share links (Google Drive, Dropbox, and the like) were never built for "direct image serving." Use them to embed images in shared notes and they'll almost always break.

Three platforms, one table

Here's the summary — glance at it before you start a shared note:

Platform Most stable way to place images What breaks Free-tier limit
HackMD Upload directly into this shared note Copying an image link from a private note 1 MB per image
Notion Hit Upload for a file Embed link with an external URL Currently no per-file size cap
Google Docs Insert → Upload from computer Insert → By URL with a Drive link Built-in, travels with the doc

Spot the common thread? All three "safe answers" say the same thing: get the image file itself into the note, don't drop in an external address.

Why "just use a cloud-drive link" always blows up

Let me add one layer of the why, because once you get it, you'll never step on this again.

Personal cloud drives (Google Drive, iCloud, Dropbox) are built for private storage plus authorized sharing — not for a webpage to "direct-link an image." Their share links usually sit behind three gates:

  1. Permission check: is the requester authorized? Not authorized, blocked.
  2. Login verification: many share links quietly check whether you're logged into a Google/Dropbox account.
  3. Hotlink protection (Referer check): the server looks at which site the image request came from, and rejects anything that isn't its own.

When a note platform renders images for your teammates, it knocks on that link as an anonymous stranger. Any one of those three gates trips, and the image never shows. And because you're already logged in and authorized, you can never reproduce the problem — which is exactly why "but it looks fine on my end" became the classic scene.

The most counterintuitive one is gate three, hotlink protection. Picture a staff cafeteria: the guard at the door only recognizes employee badges, so an outsider walking in with the same menu gets stopped anyway. When the note platform fetches images for your teammates, it's holding no badge, so it's stopped at the door. Once that clicks, you see why broken images always happen on someone else's end and never on your own machine.

To be fair, this isn't a dumb design — it's a tool used in the wrong scenario. For an image to load reliably for anyone, on any device, you need a service built specifically to serve public direct links — an image host.

Step by step: the SOP for notes whose images never break

A flow you can just follow. Beginners, read this part:

  1. Before opening a shared note, ask: will anyone else see this? If yes, you cannot paste images via a private cloud-drive link.
  2. Upload if you can: HackMD drag / Notion Upload / Google Docs Insert from computer — take this path first.
  3. Compress oversized images first: phone screenshots are often 2–3 MB; use Squoosh (squoosh.app) or TinyPNG to squash them under 1 MB so HackMD accepts them.
  4. When one image needs to live in many places, use an image host: if the same image goes into a note, a Discord channel, and the slide deck, upload it once to a host that gives a stable direct link and paste that one URL everywhere.
  5. Always self-test in incognito before you go live: open an incognito tab, don't log in, and check that every image shows. This 30-second step saves the whole group's face.

Step 5 is the most important. That one move means you'll never get another "why is your section all broken images" message. I leaned on it to save myself back then — see, not that hard.

When you need a stable direct link, a host is the least-effort fix

If your image gets reused across platforms (note + group chat + slides all need it), instead of uploading separately in each place, upload once, get one stable direct link, and paste it everywhere. That's the entire reason image hosts exist.

Take lpic.cc: no signup needed, upload free, and it hands you a direct URL you can drop into a HackMD ![](url), a Notion Embed, or any Markdown — served over a CDN so it opens fast for anyone on any device. A few features that are genuinely handy for group notes: password protection (for whiteboard photos you don't want randomly viewed), burn-after-reading (auto-expires once seen), and it even supports video, not just images.

To be honest about the limits: lpic.cc free files have a retention cap (currently 30 days) and a per-file size limit, and it's an ad-supported free service. So it fits "one semester of shared notes, a temporary share" — if you need permanent archival you'll pull out in ten years, do a separate long-term backup and don't keep your only copy here.

FAQ

Q1: Why do I see the image but my teammates get broken ones?

Nine times out of ten you used a hotlink, not an upload, and that source (usually your private cloud drive or a private note) is only accessible to you. Teammates' browsers fetch as anonymous strangers and get blocked by permissions. Fix: switch to the platform's built-in Upload, or use an image host that serves public direct links.

Q2: HackMD keeps saying my image upload failed. What do I do?

Check the size first. The free tier caps each image at 1 MB, and phone screenshots easily exceed that. Compress with Squoosh or TinyPNG, then paste. Also confirm you're uploading into this shared note, not copying a link over from a private note.

Q3: Can I paste a Google Drive image link straight into a shared note?

Strongly discouraged. Google Docs itself refuses drive.google.com image URLs, and hotlinking Drive images on other platforms broke en masse after Google's 2024 cookie policy changes. Personal cloud-drive share links were never built for direct image serving — they break.

Q4: What's the actual difference between Notion's Upload and Embed?

Upload stores the file in Notion's own cloud — most stable, unaffected if the source is deleted. Embed fetches from an external URL in real time, so if the source is deleted or its permission closed, you get Failed to Load. Upload whenever you can.

Q5: One image needs to go into a note, Discord, and a report — least-effort way?

Upload it to a host that serves stable direct links (e.g. no-signup lpic.cc) and paste one URL everywhere. Maintain a single source and every platform shows the same image, with no re-uploading in each spot.

Q6: Does this apply to Reddit, Discord, or Stack Overflow posts too?

Same principle. Reddit and Stack Overflow accept image uploads directly (they rehost, so those are stable), but if you hotlink an image from a private drive into a Stack Overflow answer or a Discord embed, it breaks the same way for anyone but you. Upload to the platform, or share a proper direct link.

References

#collaborative notes#HackMD#Notion#Google Docs#image embedding#broken images#college students
S

Written by

Sandy Lin

Beginner's Guide

Explains every step from a beginner's perspective in the simplest way possible.