C# 圖片資料庫儲存與讀取實戰指南（二）：讀取顯示篇

前言

承接上篇文章 (儲存篇)，本文實作從 SQL Server 資料庫讀取二進位圖片資料並輸出至 HTTP 回應，實現圖片動態顯示。

核心實作：ReadImage.aspx.cs

using System;
using System.Data.SqlClient;
using System.Web;

namespace ImageProcess
{
    public class ReadImage : System.Web.UI.Page
    {
        private void Page_Load(object sender, EventArgs e)
        {
            // 1. 取得查詢字串參數
            string imageId = Request.QueryString["id"];
            if (string.IsNullOrEmpty(imageId)) return;

            // 2. 資料庫連線 (實務應從 Web.config 讀取)
            string connStr = "server=.;database=pubs;uid=sa;pwd=;";
            
            using (SqlConnection conn = new SqlConnection(connStr))
            {
                string sql = "SELECT ImageContentType, ImageData FROM ImageStore WHERE ImgID = @ImgID";
                using (SqlCommand cmd = new SqlCommand(sql, conn))
                {
                    cmd.Parameters.AddWithValue("@ImgID", imageId); // 參數化查詢，防 SQL Injection
                    
                    try
                    {
                        conn.Open();
                        using (SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection))
                        {
                            if (reader.Read())
                            {
                                // 3. 設定回應標頭
                                Response.Clear();
                                Response.ContentType = reader["ImageContentType"].ToString(); // 如 image/jpeg
                                
                                // 4. 輸出二進位資料
                                Response.BinaryWrite((byte[])reader["ImageData"]);
                            }
                        }
                    }
                    catch (SqlException ex)
                    {
                        Response.Write("資料讀取錯誤：" + ex.Message);
                    }
                }
            }
            
            Response.End(); // 結束回應，避免輸出多餘 HTML
        }
    }
}

關鍵技術點解析

前端使用方式

在 ASPX 頁面或 HTML 中直接引用：

資料表結構回顧 (ImageStore)

效能與擴充建議

• 快取機制：加入 Response.Cache.SetCacheability(HttpCacheability.Public) 與 SetMaxAge 減少資料庫存取
• 非同步讀取：.NET 4.5+ 使用 ExecuteReaderAsync + ReadAsync 釋放執行緒
• 檔案系統儲存：大量/大檔案圖片建議儲存實體檔案，資料庫僅存路徑
• CDN 整合：生產環境配合 Azure Blob / AWS S3 + CDN 分發
• 錯誤圖片：查無資料時回傳預設佔位圖片而非錯誤訊息

安全性補充

• 驗證 ImageContentType 僅允許圖片 MIME 類型，防止惡意檔案上傳執行
• 限制上傳檔案大小 (Web.config maxRequestLength / maxAllowedContentLength)
• 掃描上傳檔案病毒/惡意代碼