21

我试图通过调用一个返回路径的javascript函数来设置一个'src'，如下所示：

<img src="getImagePath()" />

功能：

function getImagePath(){

     return "images/image1.png";

}

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

4

4 回答 4

15

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

<img src="pixel.gif" onload="this.onload=null; this.src=getImagePath();" />
于 2012-08-30T12:06:44.250 回答
7

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

但你可以这样做：

<img id=someImage>

<script>
    function getImagePath(){
     return "images/image1.png";
   }
   document.onload = function(){
       document.getElementById('someImage').src=getImagePath();
   };
</script>
于 2012-08-30T12:05:57.260 回答
4

基于Eugen 的回答pixel.gif，我想要一些不需要托管图像的独立（没有 id，尽可能内联） 。我想出了几个可能性：

一种选择是使用 base64 编码的 src URL（尽可能小）。请注意，IE8+支持 data-uris ：

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

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

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

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

在 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 浏览器，我很乐意这样做）。

于 2017-02-15T23:37:46.953 回答
0

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>
于 2015-02-07T22:25:28.023 回答