HTML文件換臺電腦圖片就沒了：相對路徑與資源打包

開始前先確認

但也別一上來就改路徑。有些導出工具會移除圖片標籤，這時文件裏已經沒有圖片引用，複製資源目錄也無法讓它自動出現。先檢查導出內容，再判斷是缺文件、地址錯誤還是工具本身的導出邊界。

第一步：圖片標籤還在嗎

用文本編輯器打開導出的HTML，搜索<img或預期的圖片文件名。如果找不到相關引用，回到導出工具的說明，確認是否支持保留圖片。背景圖也可能寫在樣式中，因此不能僅憑沒有img就斷言頁面完全不含圖片。

若標籤仍在，查看src屬性：它可能是相對地址、完整網絡地址，或者指向原電腦的本地位置。不同類型對應不同排查路徑。alt是圖片的替代說明，圖片缺失時有助於理解內容，但它不會代替圖片文件本身。基本用法見MDN的HTML圖片文檔。

先保留導出原件，再在副本里檢查。不要爲了一張缺失圖片就把所有地址全局替換，以免連正常鏈接也改壞。

相對地址是從哪裏開始找的

對普通HTML中的img src，相對URL根據文檔的基準URL解析。沒有另設base元素時，可按HTML所在位置理解相對文件關係；如果設置了base href，基準可能已被改變，不能仍按原文件夾猜。

assets/step-01.png表示到當前基準對應目錄下的assets裏找圖片；../assets/step-01.png先回到上一級。以斜槓開頭的/assets/step-01.png則不是“HTML旁邊的assets”：在網站上通常從站點根路徑解析，不適合作爲普通離線文件夾示例照抄。

還有一個容易混淆的例外：外部CSS文件中的相對圖片URL通常相對CSS文件的位置解析。本文下面只演示HTML裏的img src，不把所有資源路徑都當成同一個基準。

一個可以覈對的目錄示例

示例：準備一個交付目錄，HTML與assets文件夾並列，圖片放進assets。以下名稱僅作示意，必須實際放入對應圖片才能顯示。

handoff/
  index.html
  assets/
    step-01.png
    step-02.png

index.html可以使用下面的最小內容，且不設置base：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>操作说明示例</title>
</head>
<body>
  <p>第一步：打开设置页面。</p>
  <img src="assets/step-01.png" alt="设置页面示意">
  <p>第二步：核对输出选项。</p>
  <img src="assets/step-02.png" alt="输出选项示意">
</body>
</html>

從index.html出發，只需進入一層assets目錄，就能對應兩個文件。這是目錄關係示例，不是已運行的網頁測試。移動整個handoff目錄，內部相對關係仍在；只移走index.html，則不再滿足示例的文件關係。

打包的是整套資源，不只是HTML

確認相對關係後，將整個交付目錄壓成一個包，接收方完整解壓再打開index.html。不要讓對方只從壓縮包預覽裏雙擊某個文件，並據此判斷資源已經齊全；不同解壓軟件的臨時打開方式可能不同。

覈對真實擴展名和大小寫，例如引用.png卻放入.jpg不是同一文件。大小寫差異在某些本地環境下可能暫時不報錯，換到其他系統或服務器後卻會失敗，所以應保持一致。HTML資源路徑使用URL形式的正斜槓，不照搬本機文件管理器的寫法。

如果兩張圖片同名，不要複製時直接覆蓋其中一張。先給它們區分名稱，同時修改對應引用，再逐一覈對圖文。文件在目錄裏不代表頁面引用的是正確那一張。

網絡圖片能看，不代表能離線交付

完整網絡地址通常仍需聯網訪問，並可能受鏈接失效、權限或服務端限制影響。自己登錄過的網站能顯示，也不證明接收方具有相同訪問條件。需要離線資源時，應使用有權保存和交付的本地圖片，並更新引用。

有些專門的打包方式能內嵌圖片，但普通img src不會自動把文件裝進HTML。也不要認爲“導出網頁”就等於下載了所有遠程資源。先查工具說明和實際產物，確認得到的是單文件文檔還是需要附件目錄的頁面。

本站轉換器要單獨看功能邊界

本站Markdown導出指南說明，當前轉換器會清理外部圖片以及腳本等內容。因此，上面的手工HTML資源包不應被理解爲本站的一鍵圖片打包教程。

若使用該轉換器後圖片被移除，應按其當前範圍保留文字說明或普通來源鏈接；需要完整圖文資源的離線交付，則選擇明確支持該需求的流程。不要嘗試繞過清理規則，也不能承諾改成相對路徑就一定會被本站保留。

在副本里驗收，再發給對方

把交付包複製到另一個位置，完整解壓後打開，逐張查看圖片與說明是否對應。需要離線使用的部分，再在斷網條件下檢查。換目錄能發現部分絕對路徑問題，但不能替代真實接收環境的檢查。

最終確認：目錄齊全；引用名稱一致；沒有依賴原電腦專屬地址；替代說明有意義；交付方式與離線要求一致。導出成功、自己打開成功和對方驗收成功，應分別記錄，不能混爲一件事。

如果任務是將文字爲主的Markdown整理成獨立網頁文件，可打開AI Lab Markdown轉HTML。公開頁面標註9積分解鎖、當前賬號長期有效。它的已覈驗範圍不包含自動上傳、內嵌或打包圖片；導出文件也不等於網站已經發布。