How to force 'asp:Image' to load new 'imageUrl' ?

I have a page that represents a "box" for example. In this box I have multiple images. I am showing each image information on a row inside a data grid view. What I am trying to achieve is showing the image itself under the grid by clicking on any row. What I have tried to do is the next:

In the code behind, while loading the grid, I am adding an attribute in the ItemDataBound event such as:

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

In the aspx page I have the following:

<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>

Plus in the header I have this javascript code that I am calling onclick from each row:

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);
    }
}

I already made sure with these alerts that my click event is fired. I also visited the url shown in the alert to make sure that everything is fine.

My problem is that when I click on any given row from the data grid, no image is displayed. I feel like I am missing something like refreshing the page or somehow refreshing the asp:Image to load the image from the new imageUrl that was assigned using the javascript code. I am not sure how to fix it since I have little experience with front-end development.

Solution

imageURL is a server-side property only.

ASP.NET tags are just changed into HTML by the ASP.NET engine and then sent to the browser, which can only read HTML.

In the rendered HTML the attribute containing the URL is called "src". See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Therefore changing imageURL to src as follows

 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";

should solve your problem, I think.