How to set the image src using jQuery

Question

I am trying to change the image src attribute using jQuery

jQuery("#imageID").attr('src','http://localhost:8080/images/1/myImage.png' );

using the above code i can change the src attribute, but when i try this:-

jQuery("#imageID").attr('src',jQuery("#imageBlock").css('background-image') );

i am unable to change the src.

provided

alert ( jQuery("#imageBlock").css('background-image') );

returns:

url(http://localhost:8080/images/1/myImage.png)

Edit #1 Just when i was about to accept the solution. I must say, almost all solution worked in FF. I tried:

• slice(4,-1);
• split("(")[1] > then replace ( ")" , "" );

I guess others will also work. But none of the solutions is working in IE. Reason being: while FF returns:

url(http://localhost:8080/images/1/myImage.png)

IE Returns:

url("http://localhost:8080/images/1/myImage.png")

^^ mind the quotes here

Now, what could be the generic way to set the src attr. Do i need to test the browser if it is IE or not?

This is the working code.

var src = "";
    if ( jQuery.browser.msie ) {
        src = jQuery("#imageBlock").css('background-image').slice(5,-2);        
    }else{
        src = jQuery("#imageBlock").css('background-image').slice(4,-1);
    }   
    jQuery("#imageID").attr('src', src );

I really don't like it :x. If there is another solution than this, then please let me know or else i will accept the slice solution straight away.

Answer 1

You would need to strip the url( and closing ) parts out for that to work.

So url(http://localhost:8080/images/1/myImage.png)

becomes

http://localhost:8080/images/1/myImage.png

You could do this with a substring, a regex replace or any method of your choosing.

http://www.w3schools.com/jsref/jsref_replace.asp

Perhaps:

jQuery("#imageID").attr('src',jQuery("#imageBlock").css('background-image').replace('url(','').replace(')','') )

Answer 2

IMO, slice is more appropriate than substring or replace. Try this:

jQuery("#imageID").attr(
    'src',
    jQuery("#imageBlock").css('background-image').slice(4,-1)
);

Here, you're slicing the string in between url( and ). See MDC on slice for a detailed description of the method.

Answer 3

It's because the url() string is wrapped around it. You'll need to strip it from the string, for example using the replace function...

var bgimg = jQuery("#imageBlock").css('background-image').replace('url(', '');
bgimg.replace(')', '');

Answer 4

You need to extract the url part:

var backgroundImage = $("#imageBlock")
    .css('backgroundImage')
    .replace(/"/g,"")
    .replace(/url\(|\)$/ig, "");
jQuery("#imageID").attr('src', backgroundImage);