告別手動噩夢！阿剛老師的「HTML插入圖片工具」神救援你的Gemini Canvas教材網頁！

最近這段時間，大家有沒有跟我一樣，愛上了用 Gemini Canvas 來生成資訊圖表網頁作為教學教材？它的確是個強大的工具，能快速產出文字內容豐富的網頁結構。但是…對！你一定也遇到了那個惱人的痛點！

圖片處理：耗時又費力的教學絆腳石！

Gemini Canvas 厲害歸厲害，但它目前有個限制：它只能生成文字和 HTML 結構，圖片的部分是「生」不出來的！這就意味著，如果你想讓你的教材網頁圖文並茂，就得自己動手處理圖片。

傳統的做法是什麼？

• 上傳圖片到圖床：你需要一個圖床服務，把你的教學圖片一張張傳上去。
• 複製網址：一張張複製圖片的網路連結。
• 人工請 Gemini 寫入 HTML：然後，你得一張一張圖片、一個網址一個網址地，在對話框裡請 Gemini 幫你把圖片網址寫進網頁的 HTML 程式碼中。

天啊！這過程實在是太繁瑣、太浪費時間了！對我們這些時間寶貴的老師來說，簡直就是教學準備路上的一個大坑！

點擊前往「HTML插入圖片工具」

老師們的心聲，我聽見了！「HTML插入圖片工具」誕生！

既然有需求，身為愛用 AI 解決問題的阿剛老師，當然要自己動手來！我利用 Gemini Vibe Coding 的強大能力，為大家打造了一個超實用的「HTML插入圖片工具」。這個小小網頁程式，就是為了快速解決大家在使用 Gemini Canvas 製作教材網頁時，插入圖片和 YouTube 影片的困擾！

它用起來有多方便？

操作流程一氣呵成，效率翻倍！

• 匯入 HTML：把你用 Gemini Canvas 生成好的網頁 HTML 程式碼直接匯入工具。
• 自由插入：你可以隨心所欲地在網頁中插入圖片或YouTube 影片。
• 神功能！整合 Google 文件圖片提取：最棒的是，我把之前分享過的 Google 文件圖片網址提取器功能也整合進來了！你不再需要一個個去圖床，可以直接載入 Google 文件中的圖片，無縫銜接！
• 簡單外觀調整：工具裡還有一個簡單的文字外觀設定功能，雖然因為匯入的 HTML 類型多變，不一定能完美套用，但對於基礎調整還是很有幫助的。
• 一鍵匯出：插入完成後，你可以選擇下載成 HTML 檔案，或是複製 HTML 程式碼到剪貼簿。
• 最終回貼：把這段設定好圖片的 HTML 程式碼，貼回你原本 Gemini Canvas 生成的 HTML 區塊中取代掉，然後分享連結，一個圖文並茂的教材網頁就大功告成了！

整個過程，從原本可能耗掉半小時的圖片處理，大幅縮短到幾分鐘就能搞定！讓你的寶貴時間能花在更重要的教學設計上。

gmeini 製作圖文教材操作流程示範

以下是使用阿剛老師的「HTML插入圖片工具」來為 Gemini Canvas 製作圖文教材的操作流程示範影片，讓您輕鬆掌握插入圖片和 YouTube 影片的技巧。

小叮嚀：適用於靜態教材網頁喔！

最後要提醒大家一下，這個工具目前主要設計來支援靜態的教材網頁。如果你用 Gemini Canvas 設計了比較複雜的遊戲互動型網頁，程式碼結構可能會比較特殊，那可能就無法正常使用了。

總之，如果你是 Gemini Canvas 的愛用者，這個「HTML插入圖片工具」絕對是你製作教材網頁的效率神器！快來試試看，告別一張一張手動寫網址的噩夢吧！試用之後有任何心得或建議，都歡迎在下方留言跟我交流喔！我們下次見！