How to set the image src using jQuery
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.
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.
You need to extract the url part:
var backgroundImage = $("#imageBlock")
.css('backgroundImage')
.replace(/"/g,"")
.replace(/url\(|\)$/ig, "");
jQuery("#imageID").attr('src', backgroundImage);
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(')', '');
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(')','') )
精彩评论