时间戳

首页 > 解决方案 > 如何强制 'asp:Image' 加载新的 'imageUrl' ？

javascript - 如何强制 'asp:Image' 加载新的 'imageUrl' ？

问题描述

例如，我有一个代表“盒子”的页面。在这个框中，我有多个图像。我在数据网格视图内的一行中显示每个图像信息。我想要实现的是通过单击任何行在网格下显示图像本身。我试图做的是下一个：

在后面的代码中，在加载网格时，我在ItemDataBound事件中添加了一个属性，例如： 

Private Sub dgrBox_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgrBox.ItemDataBound
    If e.Item.DataItem IsNot Nothing Then
        Dim oBox As Box
        oBox = CType(e.Item.DataItem, Box)

        If oBox IsNot Nothing Then
                e.Item.Attributes.Add("onclick", "GetImage('" + oBox.ID.ToString() + "','" + oBox.Name + "');")                
        End If           
    End If
End Sub

在aspx页面中，我有以下内容：

<div id="divInfo" style="overflow: auto; overflow-x: hidden; width: 100%; height: 330px;">
    <table width="98%" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table width="100%">
                    <tr>
                        <td>
                            <div id="divZoomSlider" style="overflow: auto;">
                                <asp:Image ID="imgRectoImg" runat="server" Width="700px" Height="300px" oncontextmenu="ZoomOutImage(this);return false;"
                                    onclick="ZoomInImage(this);"/>
                                <asp:Image ID="imgVersoImg" runat="server" Width="700px" Height="300px" oncontextmenu="ZoomOutImage(this);return false;"
                                    onclick="ZoomInImage(this);"/>
                            </div>
                        </td>
                        <td align="right" valign="bottom">
                            <input type="image" onclick="return FlipImage();" src="../Images/recto-verso-impression-icone-8241-32.png" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

另外，在标题中，我有从每一行 javascript调用的这段代码：onclick

function GetImage(sID, sName) {
    try {
        var oimgRectoImg = document.getElementById("imgRectoImg");
        var oimgVersoImg = document.getElementById("imgVersoImg");
        oimgRectoImg.imageURL = "~/ImageDisplay.aspx?ID=" + sID + "&Mode=FULLSIZE&IMAGEDISPLAY=RECTO&TYPE=Out";
       // alert(oimgRectoImg.imageURL);
        oimgVersoImg.imageURL = "~/ImageDisplay.aspx?ID=" + sID + "&Mode=FULLSIZE&IMAGEDISPLAY=VERSO&TYPE=Out";
        //alert(oimgVersoImg.imageURL);
    } catch (e) {
        alert("GetImage: " + e.message);
    }
}

我已经通过这些警报确定我的点击事件已被触发。我还访问了url警报中显示的内容，以确保一切正常。

我的问题是，当我单击数据网格中的任何给定行时，不会显示任何图像。我觉得我错过了刷新页面或以某种方式刷新以从使用代码分配asp:Image的新图像加载图像之类的东西。我不确定如何解决它，因为我对前端开发的经验很少。imageUrljavascript

标签： javascriptasp.netvb.netimageurl

解决方案

imageURL仅是服务器端属性。

ASP.NET 标签只是被 ASP.NET 引擎转换成 HTML，然后发送到浏览器，浏览器只能读取 HTML。

在呈现的 HTML 中，包含 URL 的属性称为“src”。请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

因此imageURL改为src如下

 var oimgRectoImg = document.getElementById("imgRectoImg");
 var oimgVersoImg = document.getElementById("imgVersoImg");
 oimgRectoImg.src = "/ImageDisplay.aspx?ID=" + sID + "&Mode=FULLSIZE&IMAGEDISPLAY=RECTO&TYPE=Out";
 oimgVersoImg.src = "/ImageDisplay.aspx?ID=" + sID + "&Mode=FULLSIZE&IMAGEDISPLAY=VERSO&TYPE=Out";

我想应该可以解决你的问题。

推荐阅读