views:

24563

answers:

12

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.

A: 

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

Stephen Wrighton
It does, however, take a URI and can run javascript: pseudo-URIs. This is a cause of XSS holes.
David Dorward
A: 

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>
levik
All script tags should be child members of the head tag. otherwise you will lose browser support, specifically Opera.
mmattax
Opera doesn't support inline script tags? This is news to me.
levik
That's actually far from the truth. It's recommended to place script tags as far down in your page as possible, since DOM rendering is delayed until the script has finished executing. You can really speed up perceived page load time by placing script tags at the end of your body.
Chris MacDonald
+7  A: 

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

Armin Ronacher
A: 

Are you looking for this.src ?`

<img src='images/test.jpg' onmouseover="alert(this.src);">
Jack B Nimble
A: 

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

Bill Ayakatubby
A: 

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?

Jonathan Arkell
+1  A: 

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.

ceetheman
+3  A: 

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

Jason Bunting
A: 

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.

Jeremy DeGroot
A: 

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

A: 

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

A: 

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

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