3.4 圖片與附件
NoteCraftApp 使用文件 第 3 章・撰寫筆記

3.4 撰寫筆記

圖片與附件

在筆記裡用相對路徑引用圖片,NoteCraftApp 會自動改寫成可存取的網址;也說明支援哪些格式、PDF 附件怎麼連。

本頁目錄
  1. 寫法
  2. 會被改寫成什麼
  3. 不會被改寫的
  4. 支援的格式
  5. 連到 PDF 附件

圖片直接放在筆記資料夾裡,用相對路徑引用就好,不用另外搬到某個 public/ 資料夾。

寫法

guides/oauth/flow.md
![流程總覽](./cover.png)
![Logo](../../shared/logo.svg)

.md 與 .mdx 都適用。路徑相對於這篇筆記所在的資料夾。

會被改寫成什麼

相對路徑會被改寫成 /notes-assets/<相對於筆記資料夾的路徑>。

筆記圖片寫法改寫後
hello.md./cover.png/notes-assets/cover.png
guides/setup.md./img/step1.png/notes-assets/guides/img/step1.png
guides/oauth/flow.md../../shared/logo.svg/notes-assets/shared/logo.svg

這個網址由誰送出,看你用哪個子命令:

子命令/notes-assets/* 從哪裡來
view從筆記資料夾即時送出,只回應本機(127.0.0.1)的連線。用 --host 0.0.0.0 讓區網其他電腦連進來時,對方看不到圖片
serve本機連線一樣即時送出,改圖或新加的圖馬上看得到。區網連線拿的是上次 build 複製進產物的那份:只有被筆記引用的檔案,內容停在上次 build
build產物實際引用到的檔案會複製進 dist/notes-assets/,部署到靜態主機就能送出

不會被改寫的

  • 完整網址:https://…、data:…
  • 已經是 / 開頭的絕對路徑
  • # 開頭的頁內錨點
  • 解析後落在筆記資料夾外面的路徑:照原樣保留,不會送出資料夾以外的檔案

build 只複製被引用的檔案,不會把整個筆記資料夾的圖片帶出去。複製規則見部署。

支援的格式

類型副檔名
點陣圖.png、.jpg、.jpeg、.gif、.webp、.avif
向量圖.svg
圖示.ico
文件.pdf

連到 PDF 附件

一般連結 […](…) 的相對路徑只有指向 .md/.mdx 時會被改寫。要連到筆記資料夾裡的 PDF,直接寫成 /notes-assets/ 開頭的路徑:

Markdown
[下載規格書](/notes-assets/specs/v2.pdf)

在 GitHub 上修改這一頁