I'm trying to set an 'src' by calling a javascript function that returns the path like so:
<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.
The src attribute takes an URL, not JavaScript. You might want to try
<img src="pixel.gif" onload="this.onload=null; this.src=getImagePath();" />
You can't do this. The src attribute of an img element can't be interpreted as javascript when the html is interpreted.
But you may do this :
<img id=someImage>
<script>
function getImagePath(){
return "images/image1.png";
}
document.onload = function(){
document.getElementById('someImage').src=getImagePath();
};
</script>
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:
One option would be to use a base64 encoded src URL instead (as small as possible). Note that data-uris are supported in IE8+:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" onload="this.onload=null; this.src=getImagePath();">
See it in action on jsfiddle.
A second option would 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:
<script>
function getImagePath() {
return "http://i.imgur.com/4ILisqH.jpg";
}
document.write('<img src="'+getImagePath()+'">');
</script>
See it in action on codepen.io.
A third (perhaps even more hackish) option would be to forcibly break the image by supplying a null src, and (ab)use the onerror callback.
This works in IE11 and Chrome, but not Firefox:
<img src onerror="this.onerror=null; this.src=getImagePath();">
See it in action on jsfiddle.
This fourth option relies on a simple function that sets an <img> tag followed immediately by an inline <script> that sets the image's src via JavaScript:
<!-- In the <body> -->
<img><script>set_most_recent_img_src(getImagePath())</script>
And in your <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.
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).
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>
