如何读取存储在图像的数据src中的URL，并在另一个img控制器的src中设置该URL onclick

How to read URL which stored in a data-src of a image and set that URL in src of another img controller onclick?

本文关键字：URL src img 另一个 控制器 onclick 设置 何读取 存储 图像 中的      更新时间：2023-12-12

我正在使用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控件（另一个img控制器）的src。

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

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

function loadFullImage(ctrl)
{
    var image = document.getElementById(ctrl);
    var imgFull = document.getElementById("imgFull");
    imgFull.src = image.getAttribute("data-url");
}

谢谢。

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

function loadFullImage(ctrl)
{
    var url = ctrl.getAttribute('data-url');
    var imgFull = document.getElementById("imgFull");
    imgFull.src = url;
}
相关文章：