CSS and Jquery: Spaces Inside Image Name Break Code of Url()

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

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).

Change img src Attribute with spaces in name

As promissed (if a bit delayed), the solution was to wrap the string in "unescape", which forces thing like spaces to NOT be interpreted when used.

var newSrc = unescape("images/" + sname[field].split(":")[selected] + ".png");

Jquery forward slashes are being replaced by spaces within tags

Your problem is this

style='background-image: url('"

You have a single quote around the background image css, and then a single quote around the url. That is going to cause it to terminate the style tag instantly after "url(". Everything after that is registered as a new attribute, and that just results in the bizarre html where the image name seems to be interpreted as an attribute.

Try "\" instead of the single quotes around the url. If that doesn't work, try rearranging what uses single quotes, double quotes, and escaped quotes until it generates the correct html. I've had this exact problem. That has always resolved it.

After edit:

 $('#someId').append("<div class='request-quote__dropdown'>
<div class='request-quote__dropdown-image' 
style='background-image: url(\""+element.parent.PictureUrl+"\");'>
</div></div>")

How should I escape image URLs for CSS?

Is escaping the quotes enough?

No, you also should worry about backslashes and newlines.

Here is the CSS grammar for a double quoted URI:
http://www.w3.org/TR/CSS21/grammar.html#scanner

"([^\n\r\f\\"]|\\{nl}|{escape})"

where {nl} is

\n|\r\n|\r|\f

and {escape} is a backslash-escaped character. So a trailing backslash will break your CSS. A non-escaped newline likewise.

I would strongly recommend to remove all whitespace and finally escape " and \

Is jQuery rewriting my CSS attributes?

You should ALWAYS use + or %20 in place of a space in URLs:

<div style="background-image:url(/images/image+one.png);">

Is quoting the value of url() really necessary?

The W3C says quotes are optional, all three of your ways are legal.

Opening and closing quote just need to be the same character.

If you have special characters in your URL, you should use quotes or escape the characters (see below).

Syntax and basic data types

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

Escaping special characters:

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

Extra space in my figure

Images are displayed inline by default, and space is left for character descenders per line-height.

http://jsfiddle.net/2drYk/22/

.content {
    display: block;
}

---

Related Topics