JSP 動態生成圖片即時顯示：Servlet 輸出流與前端輪詢方案

兩種主流架構

方案一：靜態資源映射（適用公開可存取圖片）

1. 圖片生成後存放在 Web 根目錄下（如 /images/gen/）。
2. 確保該目錄在伺服器（Tomcat/Jetty）靜態資源映射內，可直接以 URL 存取：https://host/app/images/gen/xxx.png。
3. 前端 AJAX 完成生成後，動態建立 <img src="..."> 插入頁面。

注意：Eclipse 專案刷新僅為 IDE 同步，**執行時環境只看伺服器部署目錄**（wtpwebapps 或 webapps）。

方案二：Servlet 動態輸出（適用需權限控制/臨時圖片）

@WebServlet("/gen-image")
public class GenImageServlet extends HttpServlet {
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
        String id = req.getParameter("id");
        BufferedImage img = generateImage(id); // 你的生成邏輯
        resp.setContentType("image/png");
        ImageIO.write(img, "png", resp.getOutputStream());
    }
}

前端直接 <img src="/app/gen-image?id=123">，無需落地檔案。

即時顯示技巧

• 輪詢：生成請求返回任務 ID，前端 setInterval 查詢狀態，完成後插入圖片。
• WebSocket / SSE：伺服器主動推送完成通知，體驗更佳。
• Base64 Data URI：小圖片可直接內嵌 src="data:image/png;base64,..."，省去二次請求。

路徑處理原則

絕不使用本機絕對路徑（D:/...）。統一用 ServletContext.getRealPath("/") 取得部署根目錄，或配置外部儲存路徑透過環境變數注入。