用 Claude 改 Vibe 畫布的模板時，常常需要替換圖片。Claude 看不到你電腦上的圖檔，要先把圖片上傳到秒站的「媒體庫」，拿到一個網址（URL），再把網址貼回給 Claude，請它替換模板裡的 placehold.co 佔位圖。
本篇講這 3 個步驟：上傳圖片、複製網址、把網址貼回給 Claude。第一次操作 5 分鐘內可以完成。
為什麼要這個步驟#
AI 助手（Claude、ChatGPT 等）只能處理文字，沒辦法直接讀你電腦裡的圖檔。但它可以理解圖片網址（URL），所以流程變成：你先把圖片放到網路上某個地方拿到網址，再把網址告訴 Claude，Claude 就能把模板裡的圖片連結換成你的。
秒站「媒體庫」就是你網站專屬的圖床，上傳的圖片自動有公開網址，免費、永久、跟你網站綁定。比起用 Imgur、Google Drive 這類第三方圖床，更穩定、不會失效。
第 1 步：把圖片上傳到媒體庫#
- 登入秒站後台，左側選單點「媒體」→「新增媒體檔案」
- 把要用的圖片拖拉到上傳區，或點「選取檔案」從電腦選
- 等待上傳完成（一張圖通常 1-3 秒）
- 重複以上步驟把所有需要的圖片一次傳完（建議模板要用的圖一次傳完，省事）
第 2 步：複製圖片網址#
上傳完成後，點任一張剛上傳的圖片，會打開「附件詳情」面板。右側有「檔案網址」欄位，旁邊有複製按鈕：
- 「檔案網址」欄位的格式：
https://你的網域/wp-content/uploads/2026/05/編譯後的英數代碼.webp - 複製這個網址，這就是要給 Claude 用的圖片網址
- 每張圖都重複這個步驟，把所有圖片網址複製下來放在一個記事本裡備用
第 3 步：把網址貼回給 Claude 換圖#
當 Claude 改完模板 code 之後，你會看到模板裡的圖片還是 https://placehold.co/... 這種佔位圖。直接告訴 Claude 把哪張佔位圖換成哪個網址：
我已經把模板要的圖片上傳到我的網站媒體庫，下面是 3 張圖片的網址，請幫我替換掉模板裡的 placehold.co 佔位圖：
- Hero 主視覺：https://your-domain/wp-content/uploads/2026/05/hero.webp
- 為什麼選我們配圖：https://your-domain/wp-content/uploads/2026/05/why-us.webp
- 客戶案例配圖：https://your-domain/wp-content/uploads/2026/05/case.webp
直接把上面的網址替換進對應位置的 src 就好，alt 文字不用改。Claude 收到指令後，會把模板 code 裡的 placehold.co 連結換成你的網址，回傳改好的完整 code。複製這份 code 貼進 Vibe 畫布的 HTML 區塊就完成。
注意事項#
圖片大小#
- 單張圖片建議 1-2 MB 以內，太大會拖慢頁面載入
- 寬度建議：Hero 主視覺 1600-2000 px 寬即可，再大瀏覽器也是縮著看
- 其他配圖、頭像、卡片用：800-1200 px 寬就夠
- 高 PPI 螢幕（Retina）會用到 2x 圖片，所以 source 圖建議比設計尺寸再大一倍
圖片格式#
- 照片：用 JPG（檔案小、品質夠）
- 圖示、Logo、需要透明背景：用 PNG 或 SVG
- 動畫：用 GIF 或 MP4（不建議用太多，會拖慢頁面）
- WebP：秒站的媒體庫支援，檔案比 JPG/PNG 更小，是新標準推薦格式
圖片命名#
- 用英文 + 連字號命名（例如
hero-banner.jpg），避免中文檔名（網址 URL 編碼會變很長） - 命名要看得懂用途（例如
about-team-photo.jpg比IMG_2034.jpg好） - 同類圖加數字編號（例如
portfolio-01.jpg、portfolio-02.jpg）
替換時的 alt 文字#
模板裡的 alt 文字（圖片描述）已經幫你寫好通用版本（例如「主視覺示意」「團隊照片」），如果你想要更精準的 SEO，可以另外請 Claude 幫你改 alt 成更具體的描述（例如「2026 春季新品發表會主視覺」）。
常見問題#
可以一次傳很多張嗎？#
可以。媒體庫支援多檔同時上傳，把整個資料夾的圖一次拖進去也可以。
上傳的圖會出現在文章裡嗎？#
不會。媒體庫的圖只是「存在那裡」並有網址可用，不會自動出現在任何文章或頁面。要實際顯示，必須有人在文章/頁面/Vibe 畫布裡引用它的網址。
已經上傳的圖之後可以換嗎？#
可以。媒體庫每張圖都有「替換檔案」功能，新檔案會用同一個網址。所以模板已經貼上線，要換 hero 圖時不用再改 code，直接在媒體庫換檔即可。