Question

16

CSS and JQuery: spaces inside image name break code of url()

rated 0 times [ 22] [ 6] / answers: 1 / hits: 19278 / 14 Years ago, tue, may 18, 2010, 12:00:00

I have a page that is supposed to display a larger version of an image when hovered over a thumbnail.

I have a 'div' with an ID and the JQuery code is as following:

$(document).ready(function(){



  $('img').hover(function() {



    var src = $(#im + this.id).attr(src);

    $('#viewlarge').css('backgroundImage','url(' + src +')'); 

    return false;

  });



});

The images I use, are generated by a Ruby script that generate an image with a similar, yet different id. However, sometimes, photo's are uploaded that have spaces inside. My developer tools tell me that the background-image is not set correctly, yet the image path is correct and the browser don't have problems finding the image.

My question is, can I somehow sanitize the url 'src', so spaces won't be a problem? I am aware of doing this server side, yet I would like to know how to do this with JQuery/JS too.

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rylee

Add To Favorites

Follow

Total Points: 658

Total Questions: 114

Total Answers: 116

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

rylee questions

1 how to fix an error is not a function in unit testing angular 11

Mon, Jan 31, 22, 00:00, 2 Years ago

1 How to wait for function to finish in javascript?

Thu, Apr 29, 21, 00:00, 3 Years ago

1 Whether all error messages should come from the backend in a form that can be shown to the user?

Tue, Apr 27, 21, 00:00, 3 Years ago

1 Error Mocking Firebase Admin in Jest: TypeError: admin.firestore is not a function

Fri, May 8, 20, 00:00, 4 Years ago

1 Javascript data type: BigInt vs Number

Sun, May 3, 20, 00:00, 4 Years ago

View All

answered 14 Years ago emileef · Accepted Answer

Spaces are not valid in a URI. They need to be encoded to %20.

You could src.replace(/ /g, '%20'), or more generally, encodeURI(src) to %-encode all characters that aren't valid in a URI. encodeURIComponent(src) is more common, but it would only work if the src was just a single relative filename; otherwise, it'd encode / and stop paths working.

However, the real problem is that the original img src is already broken and only working thanks to browser fixups correcting your error. You need to fix the Ruby script generating the page. You should be URL-encoding the filename before including it in the path; there are many more characters that can cause you problems than just space.

As Pekka said, you should also use quotes around the URL in the url(...) value. Whilst you can get away without them for many URLs, some characters would have to be -escaped. Using double-quotes mean you can avoid that (no double-quotes can appear in a URL itself).