16 html javascript css
我试图通过调用一个返回路径的javascript函数来设置'src':
<img src="getImagePath()" />
功能:
function getImagePath(){
return "images/image1.png";
}
但它似乎没有用.我缺少什么？感谢任何人指点我正确的方向.
Eug*_*eck 13
该src属性采用URL,而不是JavaScript.你可能想尝试一下
<img src="pixel.gif" onload="this.onload=null; this.src=getImagePath();" />
你不能这样做.解释html时,元素的src属性img不能解释为javascript.
但你可以这样做:
<img id=someImage>
<script>
function getImagePath(){
return "images/image1.png";
}
document.onload = function(){
document.getElementById('someImage').src=getImagePath();
};
</script>
基于Eugen 的答案，我想要一些独立的东西（没有 id，尽可能内联），不需要托管pixel.gif图像。我想出了几种可能性：
一种选择是使用 base64 编码的 src URL（尽可能小）。请注意， IE8+支持 data-uri ：
<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 浏览器，我很高兴可以）。