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.

Solution 1

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.

Solution 2

You need to extract the url part:

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

Solution 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(')', '');

Comments

[Altaf Patel]

[This][1] is simple and to the point. [1]: stackoverflow.com/questions/18867735/…

[Rakesh Juyal]

btw, wht is this replace(/url\(|\)$/ig, "");

[Jamie Dixon]

It replaces the url() part of the string with "" so that you get the location of the image on its own.

[Andy E]

Is stripping out the " necessary? I always thought the browser returned the parsed representation of the url string, which is with no quotes? Also, if I'm wrong, shouldn't the regex be /["']/g ?

[Andy E]

@Rakesh Juyal: Yes. I actually code 95% in IE myself. The slice method is defined in the ECMAScript 3rd edition and is on the MSDN: msdn.microsoft.com/en-us/library/6w1bzf9f(VS.85).aspx.

[Amit Patil]

The browser doesn't have to return CSS values in any particular format, therefore you would have to accept any of the possible ways of stating the rule. Which would include bare strings with CSS backslash-escapes in. (This regex won't handle those, and also it will remove the string url( anywhere inside the URL, because there's no ^ anchor at the start.) If you altered it to allow the ' quote by removing them, you'd also break any URLs with apostrophes in. All this is why you probably shouldn't be trying to extract a URL from a CSS style.