Как экранировать слеши в переменной?

Question

[Turtle_Onni]

Всем здравствуйте!

Как можно экранировать слеши в переменной?
По ajax запросу возвращается url картинки, которую я вставляю через .append().
К примеру приходит "domain.ru/upload/2010/img.jpg".
После вставки в html через .append это выглядит вот так:
<img src="http: domain.ru upload 2010 img.jpg"/>

Заранее спасибо!

Comments

[Developer]

И где код с этим аппендом?

[Turtle_Onni]

Developer,

$('#load_more_posts').on('click', function (e) {        
        e.preventDefault();
        var $offset = $(this).attr('offset'),
            meta_key = $(this).attr('acf_meta_key');
        console.log('var = ' + $offset);
        $.ajax({
            method: 'POST',
            url: ajax_object.ajax_url,
            type: 'JSON',
            data: {
                offset: $offset,
                acf_meta_key: meta_key,
                action: 'load_more_posts'
            },
            success: function (response) {
                console.log(response);
                $('#load_more_posts').attr('offset', parseInt(response.data.offset));
                var content = '';
                if(meta_key === "feedback"){
                    response.data.post.forEach(function (elem) {
                        content += '<div class="full-reviews__slide expand-review">' +
                            '<div class="row mb-4">' +
                            '<div class="expand-review__author-info col-12 col-lg-4 col-xl-3">' +
                            '<div class="expand-review__author-thumb"' +
                            'style="background-image: url("' + elem['meta']['feedback_user_feedback_user_photo'] + '")"></div>';
                   
                        content += '</div><div class="expand-review__content col-12 col-lg-8 col-xl-9"><h2 class="expand-review__title">'
                            + elem['meta']['feedback_title'] + '</h2>' +
                            '<p class="expand-review__excerpt">' + elem['meta']['feedback_shortdesc'] + '</p>' +
                            '<a href="' + elem['meta']['permalink'] + '" class="expand-review__read-more">Читать полностью</a></div></div></div>';
                    });
                }
                if (content !== '') {
                    $('#load_more_content').append(content);                   
                }
            }
        });
    });

(в сокращенном варианте)

[Developer]

Turtle_Onni, а где вставка img src ?

[Turtle_Onni]

Developer, Простите, немного перепутала.

'style="background-image: url("' + elem['meta']['feedback_user_feedback_user_photo'] + '")"

вот тут вот при вставке отображается без слешей путь.

[Developer]

Поставь логгированиеelem['meta']['feedback_user_feedback_user_photo'] непосредственно перед конкатенацией content.
Что-то мне подсказывает, что битая ссылка уже приходит со стороны сервера

[Turtle_Onni]

Developer, делала, ссылка приходит адекватная, переходила поверяла работает или нет, все в норме.

[Developer]

Turtle_Onni, а как объявлен в css стиль "background-image"?
Может, там происходит постобработка?

[Turtle_Onni]

Developer, вообще стоит lazyload, но он обрабатывает только img, и не трогает background-image.

[Developer]

Turtle_Onni, нет, имею в виду style. Что там написано?

[Developer]

Turtle_Onni, вынесите этот код в тело самого вопроса

Answer 1

[Сергей Соколов]

С кавычками косяк: двойные там уже открыты для style. Замените на экранированные одинарные:

'style="background-image: url(\'' + elem['meta']['feedback_user_feedback_user_photo'] + '\')"></div>';

А лучше перепишите в обратных тиках `

так удобнее

response.data.post.forEach(function(elem) {
  content += `
    <div class="full-reviews__slide expand-review">
      <div class="row mb-4">
        <div class="expand-review__author-info col-12 col-lg-4 col-xl-3">
          <div
            class="expand-review__author-thumb"
            style="background-image: url('${elem['meta']['feedback_user_feedback_user_photo']}')">
          </div>
        </div>
        <div class="expand-review__content col-12 col-lg-8 col-xl-9">
          <h2 class="expand-review__title">${elem['meta']['feedback_title']}</h2>
          <p class="expand-review__excerpt">
            ${elem['meta']['feedback_shortdesc']}
          </p>
          <a href="${elem['meta']['permalink']}" class="expand-review__read-more">Читать полностью</a>
        </div>
      </div>
    </div>
  `;

Comments

[Сергей delphinpro]

там проще вообще убрать кавычки. Они необязательны в css-функции url()