24

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.

Improve this question

4 Answers 4

Reset to default
15

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

<img src="pixel.gif" onload="this.onload=null; this.src=getImagePath();" />
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@2astalavista I do inline script only if it is trivial and deals only with the object, where it is noted. Everybody must find his own "red line" there.
Why does this.onload=null; stand for?
The <img> tag will first load the placeholder "pixel.gif", when finished, it will run the onload code, which loads another image. If you do not set onload to null, it will be called again after the second load, after the third load, ...
7

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>
Improve this answer

1 Comment

While I ofcourse see the point of avoiding inline script, I personally draw the line at a point, where an inline script exclusivly deals with the object, where it is noted. This keeps it readable and avoids the expensive getElementById(string). Everybody has his own likings, though.
5

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).

Improve this answer

Comments

0

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>
Improve this answer

Comments