IMG SRC tags and JavaScript

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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 🙂

Method 2

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

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

Method 3

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="https://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!).

Method 4

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>

Method 5

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.

Method 6

Are you looking for this.src ?`

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

Method 7

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

Method 8

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?

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

Method 10

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

Method 11

how about this?

var imgsBlocks = new Array( '/1.png', '/2.png', '/3.png');
function getImageUrl(elemid) {  
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("get_img").src=imgsBlocks[ind]; 
}

it’s not work?

<img src="'+imgsBlocks[2]+'" id="get_img"/>

Method 12

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

Method 13

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0