GridView绑定需HTTP认证图片URL显示空白问题求助

你遇到的核心问题是ImageField的DataImageUrlField属性仅支持绑定图片URL字符串，但你现在绑定的是Image对象，类型完全不匹配，导致前端无法渲染图片，只能显示空白占位符。直接将内存中的Image/字节数组绑定到ImageField是行不通的，Web控件无法直接将这类对象转换为浏览器可识别的图片资源。

以下提供两种可行的解决思路，优先推荐第一种（性能更优）：

方案一：使用一般处理程序（ASHX）代理图片请求（推荐） #

通过ASHX文件作为中间层，处理带HTTP认证的图片请求，GridView的ImageField绑定到ASHX的URL并传递图片唯一标识（如实例ID），由服务器端去获取并返回图片流。

步骤1：创建ImageProxy.ashx处理程序 #

<%@ WebHandler Language="VB" Class="ImageProxy" %>

Imports System.Web
Imports System.Net
Imports System.IO
Imports System.Configuration

Public Class ImageProxy : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        ' 获取传入的实例ID参数
        Dim instanceId As String = context.Request.QueryString("instanceId")
        If String.IsNullOrEmpty(instanceId) Then
            context.Response.StatusCode = 400
            Return
        End If

        ' 拼接完整图片URL
        Dim imageUrl As String = $"http://localhost:8042/instances/{instanceId}/preview"
        Dim username As String = ConfigurationManager.AppSettings("UN")
        Dim password As String = ConfigurationManager.AppSettings("PW")

        Try
            ' 发起带认证的请求获取图片
            Dim request As HttpWebRequest = DirectCast(WebRequest.Create(imageUrl), HttpWebRequest)
            request.Credentials = New NetworkCredential(username, password)
            request.Method = "GET"

            ' 将图片流直接返回给前端
            Using response As HttpWebResponse = DirectCast(request.GetResponse(), HttpWebResponse)
                context.Response.ContentType = response.ContentType
                Using stream As Stream = response.GetResponseStream()
                    stream.CopyTo(context.Response.OutputStream)
                End Using
            End Using
        Catch ex As Exception
            context.Response.StatusCode = 500
            ' 可选：返回默认占位图
        End Try
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

步骤2：修改GridView绑定代码 #

Dim table As New DataTable
' 存储描述和实例ID（用于生成ASHX请求参数）
table.Columns.Add("Description", GetType(String))
table.Columns.Add("InstanceId", GetType(String))

Dim JSONObj = JsonConvert.DeserializeObject(Of List(Of Series))(result)
For Each series As Series In JSONObj
    ' 处理描述文本
    Dim description As String = If(String.IsNullOrEmpty(series.MainDicomTags.SeriesDescription), 
                                  "N/A", 
                                  Replace(Replace(series.MainDicomTags.SeriesDescription.ToString(), "<", String.Empty), ">", String.Empty))
    ' 替换为实际获取实例ID的逻辑
    Dim instanceId As String = series.InstanceId 
    table.Rows.Add(description, instanceId)
Next

grvSeries.Columns.Clear()

' 添加描述列
Dim bfDescription As BoundField = New BoundField()
bfDescription.DataField = "Description"
bfDescription.HeaderText = "Description"
bfDescription.SortExpression = "Description"
bfDescription.ItemStyle.Wrap = False
grvSeries.Columns.Add(bfDescription)

' 添加图片列，绑定ASHX的带参数URL
Dim bfPreview As ImageField = New ImageField()
bfPreview.DataImageUrlField = "InstanceId"
bfPreview.DataImageUrlFormatString = "~/ImageProxy.ashx?instanceId={0}"
bfPreview.HeaderText = "Preview Image"
grvSeries.Columns.Add(bfPreview)

grvSeries.DataSource = table
grvSeries.DataBind()

方案二：使用Base64 Data URI嵌入图片（适合小图片） #

将图片字节数组转换为Base64字符串，通过Data URI直接嵌入到页面中，使用TemplateField替代ImageField来渲染图片。

步骤1：修改DataTable填充逻辑 #

Dim table As New DataTable
table.Columns.Add("Description", GetType(String))
' 存储图片的Data URI字符串
table.Columns.Add("PreviewDataUri", GetType(String))

Dim JSONObj = JsonConvert.DeserializeObject(Of List(Of Series))(result)
For Each series As Series In JSONObj
    Dim description As String = If(String.IsNullOrEmpty(series.MainDicomTags.SeriesDescription), 
                                  "N/A", 
                                  Replace(Replace(series.MainDicomTags.SeriesDescription.ToString(), "<", String.Empty), ">", String.Empty))
    
    ' 获取图片字节数组并转为Data URI（假设图片为JPEG格式，根据实际修改）
    Dim imageBytes As Byte() = GetImageFromUrl($"http://localhost:8042/instances/{series.InstanceId}/preview")
    Dim base64Str As String = Convert.ToBase64String(imageBytes)
    Dim dataUri As String = $"data:image/jpeg;base64,{base64Str}"
    
    table.Rows.Add(description, dataUri)
Next

步骤2：配置GridView的TemplateField #

grvSeries.Columns.Clear()

' 添加描述列
Dim bfDescription As BoundField = New BoundField()
bfDescription.DataField = "Description"
bfDescription.HeaderText = "Description"
bfDescription.SortExpression = "Description"
bfDescription.ItemStyle.Wrap = False
grvSeries.Columns.Add(bfDescription)

' 添加图片列，使用TemplateField
Dim tfPreview As TemplateField = New TemplateField()
tfPreview.HeaderText = "Preview Image"
tfPreview.ItemTemplate = New ImageTemplate(DataControlRowType.DataRow, "PreviewDataUri")
grvSeries.Columns.Add(tfPreview)

grvSeries.DataSource = table
grvSeries.DataBind()

' 自定义Template类实现图片绑定
Public Class ImageTemplate
    Implements ITemplate
    Private rowType As DataControlRowType
    Private dataField As String

    Public Sub New(ByVal rowType As DataControlRowType, ByVal dataField As String)
        Me.rowType = rowType
        Me.dataField = dataField
    End Sub

    Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn
        If rowType = DataControlRowType.DataRow Then
            Dim img As New Image()
            AddHandler img.DataBinding, AddressOf img_DataBinding
            container.Controls.Add(img)
        End If
    End Sub

    Private Sub img_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
        Dim img As Image = DirectCast(sender, Image)
        Dim row As DataRowView = DirectCast(img.NamingContainer.DataItem, DataRowView)
        img.ImageUrl = row(dataField).ToString()
    End Sub
End Class

内容的提问来源于stack exchange，提问作者ranasrule