如何读取存储在图像的data-src中的URL并在另一个img控制器的src中设置该URL？

Question

我正在使用ASP.net开发网站。 在页面中我通过使用此代码为图像库生成img控件。

  foreach (string url in listImageUrl)
            {
                LiteralControl lit = new LiteralControl();
                lit.Text = String.Format("<img src='/Images/Thumbnail/{0}' data-url='/Images/Full/{0}' id='imgThumbnail' onclick='loadFullImage(this)'/>", url);

                pnlThumbnailImage.Controls.Add(lit);
            }

然后我将pnlThumbnailImage添加到我的页面中的占位符。

页面中还有另一个img控件。 它是这样的。

<img id="imgFull" src="" />

我想要做的是当用户点击缩略图上方时，存储在“data-url =”中的完整图像路径应该应用于imgFull控件的src（另一个img控制器）。

那么如何在javascript中做到这一点？

我写了这个javascript函数。 但它没有用。

function loadFullImage(ctrl)
{
    var image = document.getElementById(ctrl);

    var imgFull = document.getElementById("imgFull");
    imgFull.src = image.getAttribute("data-url");

}

谢谢。

Answer 1

loadFullImage()函数内的ctrl参数不是图像元素的id，而是单击自身的HTML DOM元素。 因此，您的代码应该是这样的：

function loadFullImage(ctrl)
{
    var url = ctrl.getAttribute('data-url');

    var imgFull = document.getElementById("imgFull");
    imgFull.src = url;

}