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
Javascript function return src path
提问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 src
attribute 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 src
attribute of an img
element 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.gif
image. 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.
A second optionwould be to use document.write
to write the image tag directly with an inline script. Just put the below <script>
instead of the <img>
. Note that many consider document.write
to 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 onerror
callback.
第三个(可能更加骇人听闻)选项是通过提供空 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.
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>