如何在 mvc WebGrid 中顯示數據庫圖像（字節 []）

Question

我正在嘗試在 .NET MVC WebGrid 列中顯示來自數據庫的 byte[] 圖像。 我正在做以下步驟

(EF 模型 - Articulos)

[Key]
    public int id_Art { get; set; }

    public int id_Pro { get; set; }

    [StringLength(1)]
    public string tipo_Pro { get; set; }

    [Required]
    [StringLength(50)]
    public string nombre_Pro { get; set; }

    [Required]
    [StringLength(100)]
    public string descripcion_Pro { get; set; }

    public byte[] imagen_Pro { get; set; }

    [Required]
    public decimal? precio_Pro { get; set; }

    public int? estatus_Pro { get; set; }

（控制器）

public List<articulos> cargarArticulos(string search, string sort, string sortdir, int skip, int pageSize, out int totalRecord)
    {
        using (DbModel db = new DbModel())
        {
            var v = (from a in db.articulos

                     where
                        a.tipo_Pro.Contains(search) ||
                        a.nombre_Pro.Contains(search) ||
                        a.descripcion_Pro.Contains(search)
                     select a
                     );
            totalRecord = v.Count();
            v = v.OrderBy(sort + " " + sortdir);
            if (pageSize > 0)
            {
                v = v.Skip(skip).Take(pageSize);
            }
            return v.ToList();
        }
    }

（看法）

<div>
            @grid.Table(
                    tableStyle: "table table-responsive table-bordered",
                    headerStyle: "webgrid-header",
                    footerStyle: "webgrid-footer",
                    alternatingRowStyle: "webgrid-alternating-row",
                    rowStyle: "webgrid-row-style",
                    columns: grid.Columns(
                        grid.Column(columnName: "imagen_Pro", header: "IMAGEN", format: ),
                        grid.Column(columnName: "tipo_Pro", header: "TIPO"),
                        grid.Column(columnName: "nombre_Pro", header: "NOMBRE"),
                        grid.Column(columnName: "descripcion_Pro", header: "DESCRIPCION"),
                        grid.Column(columnName: "precio_Pro", header: "PRECIO"),
                        grid.Column(header: "⇨", format: (item) => Html.ActionLink("Ver", "Ver", new { }))
    )
)

其他一切正常，我成功地從控制器檢索列表，並將其顯示到 Webgrid 中，唯一的問題是顯示存儲在我的數據庫中的字節 [] 圖像，我不知道如何將其轉換為base64 之前在 webgrid 中顯示或簡單地在列中添加正確的格式。 我已經為此工作了幾個小時，請幫忙。

grid.Column(columnName: "imagen_Pro", header: "IMAGEN", format: ),

Answer 1

這是將字節數組轉換為 Base64 並將 Base64 字符串嵌入網格中的 img 標記的方法。 您應該能夠像這樣向控制器添加靜態方法：

public static String ConvertByteArrayToBase64(int id)
{
    using (var db = new DBModel())
    {
        return Convert.ToBase64String(db.Articulos.Where(c => c.id_Art == id).First().imagen_Pro);
    }
}

然后像這樣添加列：

columns: grid.Columns
(
    grid.Column(header: "IMAGEN", format: @<img src="data:image/jpeg;base64,@YourController.ConvertByteArrayToBase64(@item.id_Art)" alt="">))
)

如果是 png 或 gif，請分別將 image/jpeg 替換為 image/png 或 image/gif。

Answer 2

我有類似的任務，但就我而言，我使用了一種非常直接的方法：

控制器

添加以下方法，該方法將從您的數據庫中搜索並獲取圖像：

public ActionResult SetImageThrough(int id)
    {
        var fileById = (from fi in _db.InvMasters
                        where fi.UId== id
                        select new {fi.SampleAttach }).ToList().FirstOrDefault();
        return File(fileById.SampleAttach, "image/jpg");
    }

查看頁面

添加使用以下方法：

grid.Column(format:<img src="/ProductPricing/SetImageThrough?@item.UId" alt="Sample" height="50" width="70" /></text>, header: "PRODUCTIMAGE"),

希望這將幫助您顯示您的圖片。 如果有不同的擴展名，您可以僅將以下（“圖像/jpg”）更改為 .png（如果是這種情況）。

編碼快樂！！！