IMG SRC tags and JavaScript

Question

Is it possible to call a JavaScript function from the IMG SRC tag to get an image url?

Like this:

<IMG SRC="GetImage()" />

<script language="javascript">
   function GetImage() {return "imageName/imagePath.jpg"}
</script>

This is using .NET 2.0.

Answer 1

No. The Img's SRC attribute is not an event, therefore the inline JS will never fire.

Answer 2

You cannot do it inline the image @src, but you should be able to call it from an inline script block immediately following your image:

<img src="" id="myImage"/>
<script type="text/javascript">
  document.getElementById("myImage").src = GetImage();
</script>

Answer 3

Nope. It's not possible, at least not in all browsers. You can do something like this instead:

<img src="blank.png" id="image" alt="just nothing">
<script type="text/javascript">
    document.getElementById('image').src = "yourpicture.png";
</script>

Your favourite JavaScript framework will provide nicer ways :)

Answer 4

Are you looking for this.src ?`

<img src='images/test.jpg' onmouseover="alert(this.src);">

Answer 5

Since you're using .NET, you could add the runat="server" attribute and set the src in your codebehind.

Answer 6

You might be able to do it on the server side. Alternately you could attach an onload event to swap the image src out. I guess the question then becomes, why would you have to use Javascript in the first pace?

Answer 7

you could dynamically feed the image by calling an aspx page in the SRC.

Ex;

<img src="provideImage.aspx?someparameter=x" />

On the page side, you`ll need to put the image in the response and change the content type for an image.

The only "problem" is that your images won't be indexed a you better put some cache on that provider page or you'll ravage the server.

Answer 8

Is it possible to call a JavaScript function from the IMG SRC tag to get an image url?

Do you mean doing something like the following?

<img src="javascript:GetImage()" />

Unfortunately, no - you can't do that. However, you can do the following hack:

function getImageUrl(img) {
   var imageSrc = "imageName/imagePath.jpg";
   if(img.src != imageSrc) { // don't get stuck in an endless loop
      img.src = imageSrc;
   }
}

Then, have the following html:

<img src="http://yourdomain.com/images/empty.gif" onload="getImageUrl(this)" />

The onload event will only fire if you have an actual image set to the src attribute - if you don't set that attribute or set it to an empty string or something similar, you will get no love. Set it to a single pixel transparent gif or something similar.

Anyway, this hack works, but depending on what you are really trying to accomplish, this may not be the best solution. I don't know why you would want to do this, but maybe you have a good reason (that you would like to share with us!).

Answer 9

I've had to do something like this before, and IIRC the trick winds up being that you can't change an src attribute of an image that's part of the DOM tree. So your best bet is to write your HTML skeleton without the image and 1)create an onLoad function that generates a new img element with document.createElement, 2) set the src attribute with setAttribute(), and 3) attach it to your DOM tree.

Answer 10

OnLoad event of image called again and again do some thing like this

Answer 11

OnLoad event of image called again and again do some thing like this

Answer 12

If you're in the mood for hacks, this works as well.

<img src='blah' onerror="this.src='url to image'">