先把圖片找回來，每一步都有依據。
JS產生的圖片也有實際src。先對照data中的image、實際assets清單與Network404，不用換另一張圖掩蓋路徑錯誤。
這關帶走：同一張原圖恢復，其他資料及圖片不變。
先學一招：網址要從目前檔案位置計算
同一張原圖恢復，其他資料及圖片不變。
帶上你的裝備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 01-image-path的projects.js第一筆image、素材清單與404
JS產生的圖片也有實際src。先對照data中的image、實際assets清單與Network404，不用換另一張圖掩蓋路徑錯誤。
先分清自己的作品、線上畫面與可啟動參考包；本堂是靜態作品除錯，參考包不需要案件後端，依OPEN_REFERENCE.html操作即可。
一起拆解：從資料找到真正圖片路徑
本關18分鐘觀念：3分鐘看輸入、6分鐘逐步推演、5分鐘正常與錯誤對照、4分鐘先預測再說明。
這次的輸入
works.html由projects.js渲染；首筆brand-01的image誤寫assets/stress-portrait-missing.png，實際檔案是assets/stress-portrait.png。
// projects.js首筆資料，只改image
image: "assets/stress-portrait.png"
// 圖片網址從works.html的portfolio目錄解析這段是觀念縮圖，完整可操作檔案在本關參考成果；請依當前階段判讀，不把片段直接貼到任意位置。
一步一步推演
- 先記Network的404、目前works.html位置與projects.js的首筆image。
- 對照自己的assets清單，只修該筆image，不改alt或借別堂圖片。
- 重整後核對請求成功、原圖片完整及其他資料保留，再記這項故障證據。
正常應看到
資料渲染的首張圖片恢復，alt與作品內容保留。
常見錯誤對照
只在HTML另加一張img，原projects.js重新渲染後仍會產生錯誤圖片。
先預測，再說明原因
為何這堂應改projects.js的image，而不是直接到HTML找固定img？
跟著觀察
- 先讀「從目前HTML計算圖片位置」的輸入，指出本關實際檔案或資料。
- 如果把HTML搬進pages資料夾，相對路徑為何可能需要改？
- 依例子逐步說明正常結果與錯誤差別，再記下自己的預測；參考結果不是已完成的實測。
這是你的實際操作確認，小測不會替你勾選。
動手挑戰：先把圖片找回來
同一張原圖恢復，其他資料及圖片不變。
先準備
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 01-image-path的projects.js第一筆image、素材清單與404
親手在故障副本記一筆破圖、實際src及同層素材清單。
照這個順序開始
- 解壓fault包，三個故障各有獨立portfolio，先開01-image-path。
- 請AI定位一筆資料的image錯名，僅修該路徑。
- 重新載入、核對原圖與alt，其他六圖、搜尋分類及服務入口保留。
用證據修復一張圖片路徑
主要使用 Cursor 內建 AI；先附資料，再送出指令。
- 1．附上這些檔案與資料
- 自己的portfolio三頁HTML、projects.js、navigation.js與完整styles.css
- 只用自己的正常／獨立故障副本，附實際路徑與重現證據
- 01-image-path的projects.js第一筆image、素材清單與404
- 2．貼到哪裡
- 在 Cursor 開啟自己的本關練習副本，進入內建 AI 對話；正常版與故障副本分開。
- 用 @ 附上本關指定檔案，核對完整路徑；補實際觀察、輸入與結果，再貼下方 Prompt。
- 先讀回覆與差異，只保存指定範圍；回到瀏覽器實際檢查。版本保存由自己操作，不讓 AI 代替驗收或提交。
- 3．預期回覆與操作
- 請AI定位一筆資料的image錯名，僅修該路徑。
- 有問題單、最小diff及重新載入結果。
- 4．自己檢查結果
- 同一張原圖恢復，其他資料及圖片不變。
- 有問題單、最小diff及重新載入結果。
用證據修復一張圖片路徑 Prompt（可收合）
你是協助零基礎學員的網站開發助手。我使用 Cursor 免費版編輯原生 HTML、CSS、JavaScript；必要時把你提供的內容手動貼入檔案。
情境與本次輸入：承接第14堂完整作品集（三頁、服務內容、案例、7筆JS作品、搜尋分類與手機選單）。提供三個獨立故障portfolio：一張圖片路徑錯、一次重複click、第一張卡片固定400px。start與各checkpoint為同一乾淨基準，分別供修完該故障比對；不是額外加新功能或學生已驗收。
本次任務：只處理獨立01-image-path/portfolio：第一筆projects資料image錯寫assets/stress-portrait-missing.png，實際原圖assets/stress-portrait.png存在。先依附src、404與檔案清單說原因，再只把第一筆image改回原直幅圖；不換圖片、不改alt、文字、資料順序或其他路徑。提供最小diff及重新載入後檢查原圖、全部7卡片、分類搜尋、320/768/1280與服務入口清單；檢查結果由我實際填，不替我生成通過。
請先閱讀我附上的相關檔案或資料，資訊缺漏時精確列出需要補充的項目，不猜檔名、API 或測試結果。說明以繁體中文撰寫，指出檔案與修改位置；檢查結果區分已知、待驗與未完成。只處理學生自己的練習副本，不改現有展示網站，不要求付費訂閱。Cursor AI 無法使用？改用 ChatGPT 備援
把上方指定的檔案內容、清單與補充資料，連同同一份 Prompt 貼入 ChatGPT 對話。只貼電腦上的路徑，無法讓它讀取你的檔案。
收到程式碼時，先核對檔名與修改位置，再手動存回自己的練習副本；若收到檢查表或補檔步驟，就逐項操作。不要把 Prompt 或程式碼框的反引號貼進 HTML／CSS。
兩邊都受限時，可先看既有參考成果、檢查差異與手動修改；未做過的 AI 生成或公開發布仍記待完成。不要貼入帳密、金鑰或真實個資。
複製只取得 Prompt 文字，檔案需自行在 Cursor 附上；本頁不會呼叫 AI 或自動完成關卡。
卡住時，APPA 給你一點線索
線索 1｜先找現象與證據
此圖由projects.js產生，不只查works.html。
線索 2｜再縮小修改範圍
從works.html所在目錄計算assets路徑。
回到自己的作品，逐項檢查
- 同一張原圖恢復，其他資料及圖片不變。
- 有問題單、最小diff及重新載入結果。
- 未實際完成的AI、發布或裝置驗收記待完成。
需要對照？看這一關的參考成果
先檢查自己的作品，再對照差異。開啟參考不會算完成。
查看本關靜態參考畫面（另開分頁）本堂是靜態作品除錯，不需要案件後端。下載本關完整參考後，依 OPEN_REFERENCE.html 啟動自己的預覽；不要覆蓋正常作品。
下載本關靜態參考包尚未完成可以先往下看，之後再回來補做。
保留依據與結果，再帶著作品往下走。
保留自己的修改差異與檢查結果。完成兩項操作確認再往下一關；也可以先閱讀，稍後補做。
關卡紀錄由你自行確認；本頁不會讀取 Cursor 檔案或自動驗收作品。
留下自己的檢查紀錄
這是第 23 堂共用筆記，換關卡仍會保留。未實際做過的操作寫「待完成」。
重設會清除第 23 堂六步勾選，筆記、另一堂進度與網站檔案保留。