【问题标题】:IMG SRC tags and JavaScriptIMG SRC 标签和 JavaScript
【发布时间】:2010-09-12 03:09:00
【问题描述】:

是否可以从IMG SRC标签调用JavaScript函数来获取图片url?

像这样:

<IMG SRC="GetImage()" />

<script language="javascript">
   function GetImage() {return "imageName/imagePath.jpg"}
</script>

这是使用 .NET 2.0。

【问题讨论】:

  • 这个问题并没有真正概述您想要实现的目标?
  • 同意 - 我花了一分钟才弄清楚他在说什么......

标签: javascript asp.net image


【解决方案1】:

没有。 Img 的 SRC 属性不是事件,因此内联 JS 永远不会触发。

【讨论】:

  • 但是,它确实采用 URI 并且可以运行 javascript: pseudo-URIs。这是 XSS 漏洞的原因。
【解决方案2】:

你不能内联图像@src,但你应该能够从紧跟图像的内联脚本块中调用它:

<img src="" id="myImage"/>
<script type="text/javascript">
  document.getElementById("myImage").src = GetImage();
</script>

【讨论】:

  • Opera 不支持内联脚本标签?这对我来说是个新闻。
  • 这实际上远非事实。建议将脚本标签放置在页面中尽可能低的位置,因为 DOM 渲染会延迟到脚本完成执行。您可以通过在正文末尾放置脚本标签来真正加快感知页面加载时间。
【解决方案3】:

不。这是不可能的,至少不是在所有浏览器中。你可以这样做:

<img src="blank.png" id="image" alt="just nothing">
<script type="text/javascript">
    document.getElementById('image').src = "yourpicture.png";
</script>

你最喜欢的 JavaScript 框架会提供更好的方法 :)

【讨论】:

    【解决方案4】:

    您在寻找 this.src 吗?`

    <img src='images/test.jpg' onmouseover="alert(this.src);"> 
    

    【讨论】:

      【解决方案5】:

      由于您使用的是 .NET,因此您可以添加 runat="server" 属性并在代码隐藏中设置 src

      【讨论】:

        【解决方案6】:

        可能能够在服务器端执行此操作。或者,您可以附加一个 onload 事件来交换图像 src。我想问题就变成了,为什么你必须在第一步中使用 Javascript?

        【讨论】:

          【解决方案7】:

          您可以通过调用 SRC 中的 aspx 页面来动态提供图像。

          前;

          <img src="provideImage.aspx?someparameter=x" />
          

          在页面方面,您需要将图片放入响应中并更改图片的内容类型。

          唯一的“问题”是您的图像不会被索引,您最好在该提供商页面上放置一些缓存,否则您会破坏服务器。

          【讨论】:

            【解决方案8】:

            是否可以从IMG SRC标签调用JavaScript函数来获取图片url?

            您的意思是执行以下操作吗?

            <img src="javascript:GetImage()" />
            

            很遗憾,不——你不能那样做。但是,您可以执行以下 hack:

            function getImageUrl(img) {
               var imageSrc = "imageName/imagePath.jpg";
               if(img.src != imageSrc) { // don't get stuck in an endless loop
                  img.src = imageSrc;
               }
            }
            

            然后,有以下html:

            <img src="http://yourdomain.com/images/empty.gif" onload="getImageUrl(this)" />
            

            只有在您将实际图像设置为 src 属性时才会触发 onload 事件 - 如果您不设置该属性或将其设置为空字符串或类似的东西,您将得不到爱。将其设置为单像素透明 gif 或类似的东西。

            无论如何,这个 hack 是有效的,但取决于你真正想要完成的事情,这可能不是最好的解决方案。我不知道您为什么要这样做,但也许您有充分的理由(您想与我们分享!)。

            【讨论】:

              【解决方案9】:

              我以前不得不做这样的事情,而 IIRC 的诀窍是你不能更改 DOM 树的一部分的图像的 src 属性。因此,最好的办法是编写不带图像的 HTML 骨架,并 1)创建一个 onLoad 函数,该函数使用 document.createElement 生成一个新的 img 元素,2)使用 setAttribute() 设置 src 属性,以及 3)将其附加到您的 DOM树。

              【讨论】:

                【解决方案10】:

                一次又一次调用图像的 OnLoad 事件,做一些类似的事情

                【讨论】:

                  【解决方案11】:

                  一次又一次调用图像的 OnLoad 事件做一些这样的事情

                  【讨论】:

                    【解决方案12】:

                    如果您想破解,这也可以。

                    <img src='blah' onerror="this.src='url to image'">
                    

                    【讨论】:

                      【解决方案13】:

                      这个怎么样?

                      var imgsBlocks = new Array( '/1.png', '/2.png', '/3.png');
                      function getImageUrl(elemid) {  
                      var ind = document.getElementById(elemid).selectedIndex;
                      document.getElementById("get_img").src=imgsBlocks[ind]; 
                      }
                      

                      这不行吗?

                      <img src="'+imgsBlocks[2]+'" id="get_img"/>
                      

                      【讨论】:

                      • 假设您在 JS 代码中构建 HTML;问题中没有暗示是这种情况。