Fatal编程技术网

Javascript函数返回src路径

javascript html css

Javascript函数返回src路径,javascript,html,css,Javascript,Html,Css,我试图通过调用javascript函数来设置“src”，该函数返回如下路径： <img src="getImagePath()" /> 但它似乎不起作用。我遗漏了什么？感谢有人给我指出了正确的方向。你不能这样做。当解释html时，img元素的src属性不能解释为javascript 但你可以这样做： <img id=someImage> <script> function getImagePath(){ return "images/im

我试图通过调用javascript函数来设置“src”，该函数返回如下路径：

<img src="getImagePath()" />
但它似乎不起作用。我遗漏了什么？感谢有人给我指出了正确的方向。

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

但你可以这样做：

<img id=someImage>

<script>
    function getImagePath(){
     return "images/image1.png";
   }
   document.onload = function(){
       document.getElementById('someImage').src=getImagePath();
   };
</script>
src属性采用URL，而不是JavaScript。你可能想试试

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





var country=$（“#scontry”）.val（）；
document.getElementById（“iframeid”）.setAttribute（“src”，”https://domain.com/country=“+国家）
在此基础上，我想要一些独立的东西（没有id，尽可能内联），不需要托管的
pixel.gif
图像。我提出了一些可能性：

一个选项是使用base64编码的src URL（如所示）。请注意，支持数据URI：

看到它在行动

第三个选项（可能更为粗俗）是通过提供空src来强制中断映像，并且（ab）使用
onerror
回调

这适用于IE11和Chrome，但不适用于Firefox：
看看它在行动上

第四个选项依赖于设置


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






在您的
中：



函数getImagePath（）{return“https://www.gravatar.com/avatar/71ec7895cada78741057c644d858b0e3"; }
函数集\u最近的\u img\u src（val）{
var a=document.body.getElementsByTagName（'IMG'）；
var img=a？a[a.length-1]：0；
如果（img）img.src=val；
}


看看它在行动上


总结：我只是在思考。每个选项都有不同的含义和要求——它们都是变通方法，应该针对您的特定用例进行彻底测试。就我个人而言，我认为第一个选项（base64 URI）是最可靠的（如果你忽略旧的IE浏览器，我很乐意这样做）。
@2astalavista我只做内联脚本，前提是它很简单，并且只处理对象（注意到对象）。每个人都必须在那里找到自己的“红线”。为什么
this.onload=null代表？标签将首先加载占位符“pixel.gif”，完成后，它将运行加载代码，加载另一个图像。如果您没有将onload设置为null，那么在第二次加载之后，第三次加载之后，它将再次被调用，……当然，我看到了避免内联脚本的意义，但我个人在一个点上画了一条线，内联脚本专门处理对象，在这个点上，它会被注意到。这样可以保持其可读性并避免昂贵的
getElementById（string）
。不过，每个人都有自己的喜好。

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



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



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



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



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



<!-- 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>