background-image не работает с encodeURIComponent

Question

Я ожидал, что это сработает

var url = 'http://path_to_some_image.jpg';
$('body').css('background-image', "url('" + encodeURIComponent(url) + "')");

Но я получаю 404 не найденные ошибки. Есть ли причина, по которой браузеры не могут обрабатывать закодированные URL в css?

Если я использую необработанный URL, он работает, но что, если URL содержит кавычки и прочее? Я бы использовал регулярные выражения, чтобы заменить их вручную:/

Answer 1

Ты должен сделать encodeURI

var url = 'http://path_to_some_image.jpg';
$('body').css('background-image', "url('" + encodeURI(url) + "')");

Разница в том,

encodeURI предполагает, что ввод является полным URI, в котором могут быть некоторые символы, для которых требуется кодировка.

encodeURIComponent будет кодировать все с особым значением, поэтому вы используете его для компонентов URI, таких как