我的網頁在自己電腦上圖片都正常，一上線圖片全變破圖！

先說結論：你的圖片沒壞——是網頁「找圖的地址」在本機和線上算出來不一樣，上線後它去錯地方找圖了。

情境：你做好一個網頁（可能是簡報頁、活動頁、作品集），在自己電腦上用瀏覽器打開——完美，圖片全都在，排版漂亮。你信心滿滿把它部署上線。

然後你打開正式網址一看——圖片全裂了。 一個一個破圖框、叉叉、或空白，文字還在但圖片全掛。你百思不解：我在自己電腦上明明好好的啊？ 檔案我也一起上傳了啊？圖片又沒消失，怎麼就是顯示不出來？

你的圖片檔好端端的。問題出在網頁「怎麼去找它們」。

你缺的詞 = 相對路徑 vs 絕對路徑（上線後算出的位置不一樣）

---

為什麼「本機好、上線壞」？（人話版）

你的網頁裡，每張圖片都寫了一個「地址」告訴瀏覽器去哪找它。而地址有兩種寫法：

• 相對路徑：像「往這附近找 圖.png」——沒寫死完整位置，靠『從我現在的位置往旁邊算』。
• 絕對路徑：像「從網站最頂層開始，/資料夾/圖.png」——寫死了完整位置，不用猜。

坑就出在相對路徑。當你在自己電腦上打開，瀏覽器算得出「附近」在哪，圖片找得到。但一上線，網址的結構變了（尤其是那種結尾沒有斜線的網址），瀏覽器就可能把某一層路徑算錯——它以為「附近」是上一層，結果跑去錯的資料夾找圖，當然找不到，就破圖了。

打個比方：你跟朋友說「餐廳在『我家隔壁』」（相對路徑）。在你家講，他找得到。但你人一移動到別的地方再講同一句「我家隔壁」，他就跑到錯的地方去了——因為「隔壁」是相對於「你現在站哪」算的。而如果你直接給完整地址（絕對路徑：「XX 路 100 號」），不管你人在哪講，他都找得到。上線就是「網頁換了個位置站」，相對路徑於是算歪了。

---

正確做法：用「絕對路徑」+ 一定要用正式網址測

兩個動作：

1. 把圖片地址改成「絕對路徑」：從網站最頂層寫起（開頭是一個斜線 /，例如 /圖片資料夾/招牌.png），而不是「就在附近」的相對寫法。這樣不管網頁部署到哪、網址長怎樣，它都能從固定的起點找到圖，不會算歪。CSS、下載連結、其他圖片，同理。
2. 鐵律：一定要用「正式網址」測，別只用本機打開測。 這個坑最陰的地方就是——它在你自己電腦上永遠不會出現，只有真的上線後才現形。所以「我在電腦上看是好的」完全不能當作「上線也沒問題」的保證。上線後，親自用正式網址從頭點一遍，特別檢查：圖片、樣式有沒有跑掉、下載連結能不能點。

---

你會搜錯的關鍵字 vs 該搜的正確詞彙

你崩潰時會打的（搜不到）	該搜的正確詞彙
「網頁上線圖片破圖本機正常」	relative path broken after deploy
「圖片路徑上線就壞」	relative vs absolute path
「本機好上線壞」	test with live URL not file://

把右邊那欄丟進 Google。這就是我們在幹的事——把你崩潰時打出來的那句「本機明明是好的」，翻譯成能找到答案的詞。

我做了一個網頁，在自己電腦上用瀏覽器打開時圖片都正常顯示，但一部署到網路上（正式網址），圖片全部變成破圖。請幫我：
1. 用白話解釋為什麼「本機打開正常、上線就破圖」，這跟「相對路徑 vs 絕對路徑」有什麼關係。
2. 教我怎麼把圖片路徑改成「上線也不會壞」的寫法。
3. 給我一條鐵律：為什麼一定要用「正式網址」測，不能只用本機打開測。