Javascript函数返回src路径答案

【问题标题】：Javascript function return src pathJavascript函数返回src路径
【发布时间】：2012-08-30 12:03:36
【问题描述】：

我正在尝试通过调用返回路径的 javascript 函数来设置“src”，如下所示：

<img src="getImagePath()" />

功能：

function getImagePath(){

     return "images/image1.png";

}

但它似乎不起作用。有什么我想念的吗？感谢任何人指出我正确的方向。

【问题讨论】：

标签： javascript html css

【解决方案1】：

src 属性采用 URL，而不是 JavaScript。你可能想试试

<img src="pixel.gif" onload="this.onload=null; this.src=getImagePath();" />

【讨论】：

@2astalavista 我只在它是微不足道的并且只处理对象的情况下才使用内联脚本。每个人都必须在那里找到自己的“红线”。
为什么this.onload=null; 代表？
<img> 标签将首先加载占位符“pixel.gif”，完成后，它将运行加载代码，加载另一个图像。如果不设置onload为null，第二次加载后会再次调用，第三次加载后，...

【解决方案2】：

你不能这样做。解释 html 时，img 元素的 src 属性不能解释为 javascript。

但你可以这样做：

<img id=someImage>

<script>
    function getImagePath(){
     return "images/image1.png";
   }
   document.onload = function(){
       document.getElementById('someImage').src=getImagePath();
   };
</script>

【讨论】：

虽然我当然看到了避免使用内联脚本的意义，但我个人在某个点画了一条线，内联脚本专门处理对象，并在此处注明。这使它保持可读性并避免昂贵的getElementById(string)。不过，每个人都有自己的喜好。

【解决方案3】：

在Eugen's answer 的基础上，我想要一些不需要托管pixel.gif 图像的独立（没有ID，尽可能内联）。我想出了几个可能性：

一种选择是改用 base64 编码的 src URL（如small as possible）。注意支持data-uris in IE8+:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" onload="this.onload=null; this.src=getImagePath();">

在jsfiddle 上查看它的实际效果。

第二种选择是使用document.write 直接使用内联脚本编写图像标签。只需将<script> 放在下面而不是<img>。请注意，许多人认为document.write 是bad practice：

<script>
  function getImagePath() {
    return "http://i.imgur.com/4ILisqH.jpg";
  }
  document.write('<img src="'+getImagePath()+'">');
</script>

看到它在行动on codepen.io。

第三种（可能更骇人听闻的）选项是通过提供空 src 来强制破坏图像，并 (ab) 使用 onerror 回调。

这适用于 IE11 和 Chrome，但 不适用于 Firefox：

<img src onerror="this.onerror=null; this.src=getImagePath();">

在jsfiddle 上查看它的实际效果。

第四个选项依赖于一个简单的函数，它设置一个<img>标签，紧跟一个内联<script>，通过JavaScript设置图像的src：

<!-- In the <body> -->
<img><script>set_most_recent_img_src(getImagePath())</script>

在你的<head>:

<!-- In the <head> -->
<script>
  function getImagePath() { return "https://www.gravatar.com/avatar/71ec7895cada78741057c644d858b0e3"; }

  function set_most_recent_img_src(val) {
    var a = document.body.getElementsByTagName('IMG');
    var img = a?a[a.length-1]:0;
    if (img) img.src = val;
  }
</script>

在codepen.io 上查看它的实际效果。

总结：我只是在构思。每个选项都有不同的含义和要求——它们都是变通方法，应该针对您的特定用例进行彻底测试。我个人认为第一个选项（base64 URI）是最可靠的（如果你忽略旧的 IE 浏览器，我很乐意这样做）。

【讨论】：

【解决方案4】：

https://stackoverflow.com/a/17229404/487771

<script type="text/javascript">
 var country = $("#SCountry").val();
 document.getElementById("iframeid").setAttribute("src","https://domain.com/country="+country)
 </script>

【讨论】：