CSS и JQuery: пробелы внутри кода разрыва имени изображения в url () - PullRequest
Новая
       4

CSS и JQuery: пробелы внутри кода разрыва имени изображения в url ()

10 голосов
/ 18 мая 2010

У меня есть страница, которая должна отображать увеличенную версию изображения при наведении на миниатюру.

У меня есть div с идентификатором, а код JQuery выглядит следующим образом: 

$(document).ready(function(){

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

    var src = $("#im" + this.id).attr("src");
    $('#viewlarge').css('backgroundImage','url(' + src +')'); 
    return false;
  });

});

Изображения, которые я использую, генерируются скриптом Ruby, который «генерирует» изображение с похожим, но другим идентификатором. Однако иногда загружаются фотографии с «пробелами» внутри. Мои инструменты разработчика говорят мне, что фоновое изображение установлено неправильно, но путь к изображению правильный, и у браузера нет проблем с поиском изображения.

У меня вопрос, могу ли я как-нибудь очистить URL 'src', чтобы пробелы не были проблемой? Я знаю, что делать на стороне сервера, но я хотел бы знать, как это сделать и с JQuery / JS.

Спасибо!

Ответы [ 5 ]

16 голосов
/ 18 мая 2010

Пробелы недопустимы в URI. Они должны быть закодированы в %20.

Вы можете src.replace(/ /g, '%20') или, в более общем смысле, от encodeURI(src) до % -кодировать все символы, которые недопустимы в URI. encodeURIComponent(src) более распространено, но оно будет работать только в том случае, если src было только одним относительным именем файла; в противном случае он закодирует / и прекратит работу путей.

Однако реальная проблема заключается в том, что исходный img src уже сломан и работает только благодаря исправлениям браузера, исправляющим вашу ошибку. Вам нужно исправить скрипт Ruby, генерирующий страницу. Вы должны URL-кодировать имя файла, прежде чем включать его в путь; Есть гораздо больше символов, которые могут вызвать проблемы, чем просто пробел.

Как сказал Пекка, вы также должны использовать кавычки вокруг URL в значении url(...). Хотя для многих URL-адресов можно обойтись без них, некоторые символы должны быть \ -экранированы. Использование двойных кавычек означает, что этого можно избежать (двойные кавычки не могут появляться в самом URL).

8 голосов
/ 18 мая 2010

Добавление кавычек вокруг URL должно помочь: 

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

однако, согласно спецификации W3C , пробел должен быть экранирован, поэтому решение для кодирования URL, предоставленное @ головой Энди Э @bobince, является самым безопасным.

4 голосов
/ 18 мая 2010
  • Во-первых, почему вы позволяете клиентам определять название ваших изображений?
  • Во-вторых, почему вы их не дезинфицируете?
  • В-третьих, я подозреваю, что вы не кодируете URL-адреса, когда пишете их в html (что превращает пробел в% 20)
0 голосов
/ 30 марта 2017

Я знаю, что вы уже выбрали свой ответ, но я хочу улучшить решение Pekka и предоставить наиболее выполнимое решение, потому что я столкнулся с другой проблемой при обработке имени файла в скобках. 

$("#viewlarge").css("background",'url(' + "'" + url+ "'" + ')');

Надеюсь, это поможет!

0 голосов
/ 18 мая 2010

Используйте функцию Javascript encode для кодирования вашего src 1003 *.

* 1005 Е.Г. * 

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

Я думаю, вы также можете использовать Javascript 'escape' функцию 

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