Javascript Javascript函数返回src路径

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12196435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:22:32  来源:igfitidea点击:

Javascript function return src path

javascripthtmlcss

提问by

I'm trying to set an 'src' by calling a javascript function that returns the path like so:

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

<img src="getImagePath()" />

the function:

功能:

function getImagePath(){

     return "images/image1.png";

}

But it doesn't seem to work. Anything I'm missing? Thanks to anyone pointing me in the right direction.

但它似乎不起作用。我缺少什么吗?感谢任何指出我正确方向的人。

回答by Eugen Rieck

The srcattribute takes an URL, not JavaScript. You might want to try

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

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

回答by Denys Séguret

You can't do this. The srcattribute of an imgelement can't be interpreted as javascript when the html is interpreted.

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

But you may do this :

但你可以这样做:

<img id=someImage>

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

回答by Jeff Ward

Building on Eugen's answer, I wanted something self-contained (no id's, as inline as possible) that would not require a hosted pixel.gifimage. I came up with a few possibilities:

基于Eugen 的回答,我想要一些不需要托管pixel.gif图像的自包含(没有 ID,尽可能内联)。我想出了几种可能性:

One optionwould be to use a base64 encoded src URL instead (as small as possible). Note that data-uris are supported in IE8+:

一种选择是使用 base64 编码的 src URL(尽可能)。请注意,IE8+支持 data-uris :

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

See it in action on jsfiddle.

jsfiddle上查看它的实际效果

A second optionwould be to use document.writeto write the image tag directly with an inline script. Just put the below <script>instead of the <img>. Note that many consider document.writeto be bad practice:

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

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

See it in action on codepen.io.

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

A third (perhaps even more hackish) optionwould be to forcibly break the image by supplying a null src, and (ab)use the onerrorcallback.

第三个(可能更加骇人听闻)选项是通过提供空 src 强行破坏图像,并(ab)使用onerror回调。

This works in IE11 and Chrome, but not Firefox:

这适用于 IE11 和 Chrome,但不适用于 Firefox

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

See it in action on jsfiddle.

jsfiddle上查看它的实际效果

This fourth optionrelies on a simple function that sets an <img>tag followed immediately by an inline <script>that sets the image's src via JavaScript:

第四个选项依赖于一个简单的函数,该函数设置一个<img>标签,后跟一个<script>通过 JavaScript 设置图像 src的内联:

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

And in your <head>:

而在你的<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>

See it in action on codepen.io.

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

Summary:I'm just ideating. Each option has different implications and requirements -- they're all workarounds, and should be tested thoroughly for your specific use case. Personally I think the first option (base64 URI) is the most solid (if you ignore old IE browsers, which I happily can).

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

回答by daniel.sedlacek

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

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>