如何在FlowLayoutPanel的UserControl中显示数据库存储的图片？

1. 创建自定义UserControl #

先做一个用于展示单条产品信息的用户控件：

• 新建UserControl并命名为ProductCard
• 在控件内添加以下元素：
  • PictureBox（命名为pbProductImage，负责显示产品图片）
  • Label（命名为lblProductName，显示产品名称）
  • Label（命名为lblPrice，显示产品价格）
• 给UserControl添加公共方法，用于传入产品数据：

public void SetProductData(string productName, decimal price, Image productImage)
{
    lblProductName.Text = productName;
    lblPrice.Text = $"价格: {price:C}";
    pbProductImage.Image = productImage;
    pbProductImage.SizeMode = PictureBoxSizeMode.StretchImage; // 适配图片显示尺寸
}

2. 从数据库读取产品数据（含图片） #

编写读取逻辑，将数据库存储的字节数组转换为Image对象：

// 读取数据库中所有产品信息
private List<(string Name, decimal Price, byte[] ImageData)> GetProductsFromDb()
{
    List<(string, decimal, byte[])> products = new List<(string, decimal, byte[])>();
    
    // 查询产品表的核心字段（替换为你的实际表字段名）
    DataTable dt = ConnectionClass.Selectcommand("SELECT ProductName, Price, ImageColumn FROM products");
    
    foreach(DataRow row in dt.Rows)
    {
        string name = row["ProductName"].ToString();
        decimal price = Convert.ToDecimal(row["Price"]);
        byte[] imageBytes = (byte[])row["ImageColumn"];
        
        products.Add((name, price, imageBytes));
    }
    
    return products;
}

// 字节数组转Image工具方法
private Image ByteArrayToImage(byte[] byteArrayIn)
{
    using(MemoryStream ms = new MemoryStream(byteArrayIn))
    {
        return Image.FromStream(ms);
    }
}

3. 将产品加载到FlowLayoutPanel #

在窗体的加载事件（或专门的加载按钮点击事件）中，批量创建UserControl实例并添加到FlowLayoutPanel：

private void LoadProductsToFlowLayoutPanel()
{
    flowLayoutPanelProducts.Controls.Clear(); // 清空已有控件
    
    var products = GetProductsFromDb();
    
    foreach(var product in products)
    {
        ProductCard card = new ProductCard();
        Image productImage = ByteArrayToImage(product.ImageData);
        
        card.SetProductData(product.Name, product.Price, productImage);
        
        // 自定义卡片样式（可选）
        card.Margin = new Padding(10);
        card.Size = new Size(200, 250);
        
        flowLayoutPanelProducts.Controls.Add(card);
    }
}

// 调用示例：窗体加载时自动加载产品
private void Form1_Load(object sender, EventArgs e)
{
    LoadProductsToFlowLayoutPanel();
}

重要优化提示 #

• 避免SQL注入：你当前的插入代码直接拼接字符串，存在严重安全风险，建议改用参数化查询：

// 替换原InsertCommand调用，使用参数化插入
SqlCommand cmd = new SqlCommand("INSERT INTO products (ProductName, Price, CatID, ImageColumn) VALUES (@Name, @Price, @CatID, @Image)", ConnectionClass.GetConnection());
cmd.Parameters.AddWithValue("@Name", txtProductName.Text);
cmd.Parameters.AddWithValue("@Price", decimal.Parse(txtPrice.Text));
cmd.Parameters.AddWithValue("@CatID", dt.Rows[0][0]);
cmd.Parameters.AddWithValue("@Image", imageByteArray);
cmd.ExecuteNonQuery();

• 资源释放：操作Image、MemoryStream时，优先使用using语句，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Faizan Ul Hassan