Javascript get wrong background-image src

Question

I want to get the natural sizes of a image on my server but I dont get the real source of my image.

I do get the source of via jquery:

.css('background-image').replace('url(','').replace(')','');

But when I store this URL into img.src so it doesn't get the right image source.

What I get: http://vatocc.net/%22http://vatocc.net/function/file/get/get_file.php?file=/secure/user_img/background_img/1265024466.jpg&purpose=view&format=false%22

Real link: http://vatocc.net/function/file/get/get_file.php?file=/secure/user_img/background_img/1265024466.jpg&purpose=view&format=false

FIDDLE

UPDATE:

https://jsfiddle.net/7r5yu7ts/1/

You're not removing the quotes, that's why it doesn't work, and the URL is considered relative — adeneo, Jan 17 '16 at 13:58
You get `url("image.png")`, and after replacing you have `"image.png"`, with the quotes, so when you add it to the src property, it's considered being relative, not absolute. — adeneo, Jan 17 '16 at 13:59
You need to use `.css('background-image').replace('url("','').replace('")','');` to remove the double quotes — dnapierata, Jan 17 '16 at 13:59
Thank you guys, I do get my fault so I will get one more coffee chears ^^ — , Jan 17 '16 at 14:04
I was looking for this info but for plain JS, so how is it supposed to be inJS? style.backgroundImage = url("image.png") ? or style.backgroundImage = 'url("image.png")' ? — damiano celent, Jan 17 '16 at 14:25
If you want to set a background image see here: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backgroundimage - If you want to get the url see here: http://stackoverflow.com/questions/14013131/javascript-get-background-image-url-of-div — , Jan 17 '16 at 14:31
@DOCTYPEHTML I want to do the following if (firstGal.style.opacity == 0 && displayed.style.backgroundImage == ???) I wanna know the exact syntax to go into the ??? placeholder. If I use variable from getComputedStyle, it kinda works, but the perfect solution would be knowing the exact syntax required, with url, just like you do. Cheers:-) — damiano celent, Jan 17 '16 at 14:41
@DOCTYPEHTML Nah, does not, this seems to be one of those typical cases where using jQuery just makes more sense. But thanks — damiano celent, Jan 17 '16 at 17:03

lucian.nicolaescu · Answer 1 · 2016-01-17T14:13:44.713

Try:

var background = $('div').css('background-image'),
imgPath = background.substring(background.lastIndexOf("(")+2,background.lastIndexOf(")")-1);

Full working:

var background = $('div').css('background-image'),
    imgPath = background.substring(background.lastIndexOf("(")+2,background.lastIndexOf(")")-1);

var img = new Image;
    img.src = imgPath;
    $('i').html('Source: ' + img.src + 'Width: ' + img.width + ' Height: ' + img.height);

https://jsfiddle.net/7r5yu7ts/3/

Javascript get wrong background-image src

1 Answers1